誰かがあなたにランダムな幾何学的なSVG形状に二重境界を追加するように頼むとしましょう。何らかの理由で、グラフィックエディターを使用することはできません - 実行時に生成する必要があります - したがって、CSSまたはSVG構文内で解決する必要があります。
あなたの最初の質問は次のとおりです。ストロークスタイルのようなものはありますか：SVGのダブル？
まあ、答えはまだありません、そしてそれはそれほど簡単ではありません。しかし、とにかく私が明らかにする方法を見るためにそれを試みます。サークル、長方形、ポリゴンの3つの異なる基本形状の可能性を探ります。透明な色を2本の線の中央に保持できるものを指します。
スポイラーアラート：少なくともCSSとSVGを使用して、すべての結果にはマイナス面がありますが、私の意図を歩きましょう。
これらはすべての形状では機能しませんが、ソリューションの中で最も簡単です。
CSSプロパティのアウトラインとボックスシャドウは、形状またはSVGの境界ボックスにのみ適用されるため、どちらも正方形と長方形にのみ優れたソリューションです。また、カスタムプロパティを使用して柔軟な色を許可します。
アウトラインのあるCSSの2行しか必要ありません。さらに、形状を通して背景色を表示します。
Box-ShadowはCSSの1行しか必要ですが、Box-Shadowを直接形に適用できないため、各形状に独自のSVGがあることを確認する必要があります。考慮すべきもう1つのことは、宣言に背景の色を適用しなければならないということです。
SVGラジアル勾配は、円でのみ動作します。勾配をストロークに直接適用できますが、コードで何度も色を宣言する必要があるため、変数を使用する方が良いです。
これらはすべての形状で動作しますが、コードは肥大化または複雑になる可能性があります。
最後に、すべての形状の1つのソリューション！フィルターが形状に直接適用されないため、それぞれの形状が独自の
これは非常に柔軟なソリューションです。フィルターを作成し、SVGのフィルター属性を介してシェイプに追加できます。ここの複雑な部分はフィルター自体です。外側の境界用に1つ、バックグラウンドフラッド用に1つ、前面に形状をペイントするために3つの絵画が必要です。結果はドロップシェードを使用するよりも良く見えますが、境界線はまだピクセル化されています。
ここにはいくつかの可能なオプションがあります。
このソリューションには変換が必要です。メイン図の色とストロークの色があり、もう一方の人物には塗りつぶし、赤いストロークがなく、中央にスケーリングされ、再配置されている他の数字に1つの数字を配置します。
Doug SchepersによるWWW-SVGメーリングリストに、SVG
ちょうどあなたがそれらをすべて1か所に持っています。他の可能な解決策を考えることができることを教えてください！
以上がSVG形状に二重境界を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
