如何仅在SVG形状的某些边上设置笔划宽度：1？

设置笔触宽度：<rect>在SVG中的元素上设置1会在矩形的每一边上放置笔触。

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

— 用户名
source

Answers:

166

如果您需要笔触或不笔触，则还可以使用笔触-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。

— 埃里克·达尔斯特罗姆
source

我们如何仅在rect元素的顶部显示笔划？

— Suresh

您能解释为什么某些位置的某些数字会产生这种影响吗？

— JacobIRR

@JacobIRR是指“ stroke-dasharray”属性的定义（在答案中链接）。这里的想法是使短划线长度与矩形的边相匹配，并且使短划线间隙与不应有笔触的边相匹配。

— ErikDahlström，

我刚刚在此链接中更新了您的解决方案codepen.io/shaswatatripathy/pen/oNgPpyd

— tripathy

这是一个编程解决方案，可生成stroke-dasharray给定对象的对象，该对象定义应显示哪些边框。阅读代码可能有助于您了解其工作原理：codepen.io/lazd/pen/WNweNwy?editors=1010

— lazd

您无法在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>形状。

— 佛罗兹
source

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

— wdebeaum
source