如何僅在SVG形狀的某些邊上設置中風寬度：1？

Question

在SVG中的<rect>元素上設置描邊寬度：1會在矩形的每一側放置一個描邊。

如何在SVG矩形的三邊放置筆觸寬度？

Answer 1

您不能在SVG中更改單個形狀的各個部分的視覺風格（如果沒有尚未提供的Vector Effects模塊）。相反，您需要爲每個筆劃或您想要改變的其他視覺樣式創建單獨的形狀。

專門爲這種情況下，而不是使用<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/

欲瞭解更多信息，請閱讀有關<polyline>和更強大但更混亂的<path>形狀。

Answer 2

您可以對三個撫摸邊使用多段線，並且根本不在矩形上放置筆觸。我不認爲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。