SVG形状に二重境界を追加する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

SVG形状に二重境界を追加する方法

Jennifer Aniston

Mar 25, 2025 am 10:48 AM

SVG形状に二重境界を追加する方法

誰かがあなたにランダムな幾何学的なSVG形状に二重境界を追加するように頼むとしましょう。何らかの理由で、グラフィックエディターを使用することはできません - 実行時に生成する必要があります - したがって、CSSまたはSVG構文内で解決する必要があります。

あなたの最初の質問は次のとおりです。ストロークスタイルのようなものはありますか：SVGのダブル？まあ、答えはまだありません、そしてそれはそれほど簡単ではありません。しかし、とにかく私が明らかにする方法を見るためにそれを試みます。サークル、長方形、ポリゴンの3つの異なる基本形状の可能性を探ります。透明な色を2本の線の中央に保持できるものを指します。

スポイラーアラート：少なくともCSSとSVGを使用して、すべての結果にはマイナス面がありますが、私の意図を歩きましょう。

シンプルなソリューション

これらはすべての形状では機能しませんが、ソリューションの中で最も簡単です。

アウトラインとボックスシャドウ

CSSプロパティのアウトラインとボックスシャドウは、形状またはSVGの境界ボックスにのみ適用されるため、どちらも正方形と長方形にのみ優れたソリューションです。また、カスタムプロパティを使用して柔軟な色を許可します。

アウトラインのあるCSSの2行しか必要ありません。さらに、形状を通して背景色を表示します。

？ 1つの形状のみの解決策。
✅単純なコード
bordersは滑らかです
crand透過的な背景

Box-ShadowはCSSの1行しか必要ですが、Box-Shadowを直接形に適用できないため、各形状に独自のSVGがあることを確認する必要があります。考慮すべきもう1つのことは、宣言に背景の色を適用しなければならないということです。

？ 1つの形状のみの解決策
✅単純なコード
bordersは滑らかです
？透明な背景はありません

SVG勾配

SVGラジアル勾配は、円でのみ動作します。勾配をストロークに直接適用できますが、コードで何度も色を宣言する必要があるため、変数を使用する方が良いです。

？ 1つの形状のみの解決策
✅単純なコード
？境界線は滑らかです
？透明な背景はありません

すべての形状のソリューション

これらはすべての形状で動作しますが、コードは肥大化または複雑になる可能性があります。

フィルター：drop-shadow（）

最後に、すべての形状の1つのソリューション！フィルターが形状に直接適用されないため、それぞれの形状が独自の

すべて、すべての形状の1つのソリューション
✅単純なコード
？境界線はピクセル化されています
？透明な背景はありません

SVGフィルター

これは非常に柔軟なソリューションです。フィルターを作成し、SVGのフィルター属性を介してシェイプに追加できます。ここの複雑な部分はフィルター自体です。外側の境界用に1つ、バックグラウンドフラッド用に1つ、前面に形状をペイントするために3つの絵画が必要です。結果はドロップシェードを使用するよりも良く見えますが、境界線はまだピクセル化されています。

すべて、すべての形状の1つのソリューション
？複雑なコード
？境界線はピクセル化されています
？透明な背景はありません

形状の再利用

ここにはいくつかの可能なオプションがあります。

オプション1：変換

このソリューションには変換が必要です。メイン図の色とストロークの色があり、もう一方の人物には塗りつぶし、赤いストロークがなく、中央にスケーリングされ、再配置されている他の数字に1つの数字を配置します。で形状を定義しました。トリックは、ビューボックスの半分をネガティブ空間に翻訳することです。そうすれば、それらをスケーリングすると、図の中心からそれを行うことができます。

すべて、すべての形状の1つのソリューション
？重複したコード
bordersは滑らかです
crand透過的な背景

オプション2：

Doug SchepersによるWWW-SVGメーリングリストに、SVG を使用する巧妙なソリューションが見つかりました。繰り返しますが、を使用して、形を一度定義し、2回参照する必要があります。今回はメインの形状がより大きなストロークを持っています。メインの形状の2番目のShapeHashalfthestroke、fillなし、背景の色に合ったストローク。