SVGシェイプの特定の側だけにstroke-width：1を設定する方法は？

ストローク幅の設定：<rect>SVGの要素に1を設定すると、長方形のすべての辺にストロークが配置されます。

SVG長方形の3辺だけにストローク幅を配置するにはどうすればよいですか？

— user782860
ソース

回答:

166

ストロークまたはストロークなしが必要な場合は、stroke-dasharrayを使用して、ダッシュとギャップを長方形の辺と一致させることもできます。

rect { fill: none; stroke: black; }
.top { stroke-dasharray: 0,50,150 }
.left { stroke-dasharray: 150,50 }
.bottom { stroke-dasharray: 100,50 }
.right { stroke-dasharray: 50,50,100 }

<svg height="300">
    <rect x="0.5" y="0.5" width="50" height="50" class="top"/>
    <rect x="0.5" y="60.5" width="50" height="50" class="left"/>
    <rect x="0.5" y="120.5" width="50" height="50" class="bottom"/>
    <rect x="0.5" y="180.5" width="50" height="50" class="right"/>
</svg>

スニペットを展開

jsfiddleを参照してください。

— エリック・ダールストロム
ソース

rect要素の上にのみストロークを表示するにはどうすればよいですか？

— Suresh、

特定の位置の特定の数値がこの効果をもたらす理由を説明できますか？

— JacobIRR

@JacobIRRは 'stroke-dasharray'プロパティの定義を参照します（回答にリンクされています）。ここでの考え方は、ダッシュの長さを長方形の辺に、ダッシュのギャップをストロークのない辺に一致させることです。

— ErikDahlström19年

私はあなたのソリューションを更新しました、このリンクcodepen.io/shaswatatripathy/pen/oNgPpyd

— tripathy

stroke-dasharrayこれは、表示する境界線を定義するオブジェクトを指定して生成するプログラムソリューションです。コードを読むと、コードがどのように機能するかを理解するのに役立つ場合があります。codepen.io

— lazd

SVGで単一のシェイプのさまざまな部分の表示スタイルを変更することはできません（まだ利用できないベクターエフェクトモジュールがない場合）。代わりに、ストロークごと、または変化させたい他の視覚スタイルごとに個別の形状を作成する必要があります。

具体的にこのような場合のために、代わりに使用するの<rect>か<polygon>の要素をあなたが作成できる<path>か<polyline>だけ矩形の三辺をカバーしていること：

<!-- Move to 50,50 then draw a line to 150,50, to 150,150, and then to 50,150 -->
<path d="M50,50 L150,50 150,150 50,150" />
<polyline points="50,50 150,50 150,150 50,150" />

これらの実際の効果は、http：//jsfiddle.net/b5FrF/3/で確認できます。

3つの側面にストロークのある赤い正方形

詳細については<polyline>、より強力でありながら混乱を招く<path>形状についてお読みください。

— フロッグス
ソース

ストロークされた3つの辺にポリラインを使用し、長方形にストロークをまったく配置しないようにすることができます。SVGではパス/シェイプの異なる部分に異なるストロークを適用できるとは思わないので、同じ効果を得るには複数のオブジェクトを使用する必要があります。

— Wdebeaum
ソース