ストローク幅を設定する方法：SVGシェイプの特定の辺のみに1を設定しますか？

Question

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

SVG四角形の3辺のみにストローク幅を配置するにはどうすればよいですか？

Answer 1

SVGの単一シェイプのさまざまな部分のビジュアルスタイルを変更することはできません（まだ使用できないVector Effectsモジュールがない場合）。その代わりに、ストロークごとに別のシェイプを作成するか、変更する他のビジュアルスタイルを作成する必要があります。

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

：

<!-- 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/

、読んより強力ではあるがもっと混乱するの形。

Answer 2

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

Answer 3

ストロークまたはノンストロークが必要な場合は、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を参照してください。