☰

SVG の線幅の描画方法を制御できますか? 質問する

tag-icon • tag-icon svg offset rect stroke
SVG の線幅の描画方法を制御できますか? 質問する

現在、ブラウザベースの SVG アプリケーションを構築しています。このアプリでは、長方形を含むさまざまな図形をユーザーがスタイル設定して配置できます。

stroke-widthたとえば、 のSVGrect要素に を適用すると1px、 のオフセットとインセットに適用されるストロークの適用方法は、ブラウザーによって異なります。特に、四角形の外側の幅と視覚的な位置を計算して、他の要素の隣に配置しようとすると、rect問題が起こります。

例えば：

  • Firefox は 1 ピクセルのインセット (下と左) と 1 ピクセルのオフセット (上と右) を追加します。
  • Chrome は 1 ピクセルのインセット (上と左) と 1 ピクセルのオフセット (下と右) を追加します。

これまでのところ、私の唯一の解決策は、実際の境界線を自分で（おそらくツールを使用して）描画し、境界線をストロークされた要素の背後に配置することですpath。しかし、この解決策は好ましくない回避策であり、可能であればこの方法は採用したくないと思っています。

そこで質問なのですが、SVG がstroke-width要素にどのように描画されるかを制御できるのでしょうか?

ベストアンサー1

いいえ、ストロークが要素の内側に描かれるか外側に描かれるかを指定することはできません。提案2003 年にこの機能について SVG ワーキング グループに提案しましたが、サポート (または議論) は得られませんでした。

SVG 提案のストロークの位置の例 (phrogz.net/SVG/stroke-location.svg より)

提案書でも述べたように、

  • ストロークの幅を2倍にしてクリッピングパスを使用してオブジェクト自体を切り取ると、「inside」と同じ視覚効果が得られます。
  • ストロークの幅を 2 ​​倍にして、オブジェクトのストロークのないコピーをその上に重ねると、「外側」と同じ視覚的な結果を得ることができます。

編集：この回答は将来的に間違っている可能性があります。これらの結果を達成するには、SVG ベクター効果、 (「内部」の場合) または (「外部」の場合) とveStrokePath組み合わせることで使用できます。ただし、ベクター エフェクトはまだ実装されていない作業中のドラフト モジュールです。veIntersectveExclude

編集2：SVG 2のドラフト仕様には、stroke-alignmentプロパティ (center|inside|outside の可能な値)。このプロパティは、最終的には UA に組み込まれる可能性があります。

編集3 : 面白いことに、そして残念なことに、SVGワーキンググループはstroke-alignmentSVG 2から削除しました。文章の後に記述されている懸念事項のいくつかを見ることができます。ここ。

おすすめ記事