如何仅在 SVG 形状的某些侧面设置笔画宽度：1？答案

【问题标题】：How to set a stroke-width:1 on only certain sides of SVG shapes?如何仅在 SVG 形状的某些侧面设置笔画宽度：1？
【发布时间】：2012-02-17 02:34:02
【问题描述】：

在 SVG 的 <rect> 元素上设置 stroke-width: 1 会在矩形的每一边放置一个笔触。

如何在 SVG 矩形的三个边上只放置笔画宽度？

【问题讨论】：

标签： html svg vector-graphics inkscape

【解决方案1】：

如果您需要描边或无描边，那么您也可以使用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。

【讨论】：

我们怎样才能只在矩形元素的顶部显示笔画？
您能解释一下为什么某些位置的某些数字会产生这种效果吗？
@JacobIRR 指的是“stroke-dasharray”属性的定义（链接在答案中）。这里的想法是将虚线长度与矩形的边相匹配，并将虚线间隙与不应有笔划的边相匹配。
我刚刚更新了你的解决方案，在这个链接codepen.io/shaswatatripathy/pen/oNgPpyd
这是一个编程解决方案，它生成stroke-dasharray，给定一个定义应该显示哪些边框的对象。阅读代码可能有助于您了解其工作原理：codepen.io/lazd/pen/WNweNwy?editors=1010

【解决方案2】：

您无法在 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/

有关更多信息，请阅读<polyline> 和更强大但更令人困惑的<path> 形状。

【讨论】：

【解决方案3】：

您可以对三个被描边的边使用折线，而根本不将描边放在矩形上。我不认为 SVG 允许您将不同的笔触应用到路径/形状的不同部分，因此您需要使用多个对象来获得相同的效果。

【讨论】：