如何在SVG图形的某些边上设置笔划宽度:1？
如何在SVG图形的某些边上设置笔划宽度:1？
提问于 2012-01-24 02:36:53
在SVG中的<rect>元素上设置笔划宽度:1会在矩形的每一条边上放置一个笔划。
如何在SVG矩形的三个边上放置笔划宽度？
回答 2
Stack Overflow用户
发布于 2012-01-25 18:09:13
如果您需要笔划或无笔划，那么您也可以使用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。
Stack Overflow用户
发布于 2012-01-24 03:10:51
您可以使用多段线来表示三个笔划的边，但根本不需要将笔划放在矩形上。我不认为SVG允许你将不同的笔画应用到路径/形状的不同部分，所以你需要使用多个对象才能获得相同的效果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8976791
复制相关文章
相似问题