当前位置：文江博客话题详情

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

发布于 2024-12-28 16:06:38 字数 104 浏览 2 评论 0原文

在 SVG 中的元素上设置描边宽度：1 会在矩形的每条边上放置一个描边。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无人接听 2025-01-04 16:06:38

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

If you need stroke or no-stroke then you can also use stroke-dasharray to do this, by making the dashes and gaps match up with the sides of the rectangle.

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>

See jsfiddle.

回复收藏 0 原文

笔落惊风雨 2025-01-04 16:06:38

您无法更改 SVG 中单个形状各个部分的视觉样式（缺少尚不可用的矢量效果模块）。相反，您需要为每个笔画或您想要改变的其他视觉样式创建单独的形状。

特别是对于这种情况，您可以创建或或元素，而不是使用code>仅覆盖矩形的三个边：

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

红色方块，三上划线Sides

有关详细信息，请阅读和更强大但更令人困惑的形状。

You cannot change the visual style of various parts of a single shape in SVG (absence the not-yet-available Vector Effects module). Instead, you will need to create separate shapes for each stroke or other visual style that you want to vary.

Specifically for this case, instead of using a <rect> or <polygon> element you can create a <path> or <polyline> that only covers three sides of the rectangle:

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

You can see the effect of these in action here: http://jsfiddle.net/b5FrF/3/

Red square with stroke on three sides

For more information, read about the <polyline> and more-powerful-but-more-confusing <path> shapes.

回复收藏 0 原文