Html 如何仅在 SVG 形状的某些侧面设置笔画宽度：1？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8976791/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set a stroke-width:1 on only certain sides of SVG shapes?
提问by user782860
Setting a stroke-width: 1 on a <rect>element in SVG places a stroke on every side of the rectangle.
<rect>在 SVG 中的元素上设置笔画宽度：1 会在矩形的每一边放置一个笔画。
How does one place a stroke width on only three sides of an SVG rectangle?
如何仅在 SVG 矩形的三个边上放置笔触宽度？
回答by Erik Dahlstr?m
If you need stroke or no-stroke then you can also use stroke-dasharrayto do this, by making the dashes and gaps match up with the sides of the rectangle.
如果您需要描边或无描边，那么您也可以使用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>See jsfiddle.
请参阅jsfiddle。
回答by Phrogz
You cannot change the visual style of various parts of a single shape in SVG (absence the not-yet-available Vector Effectsmodule). Instead, you will need to create separate shapes for each stroke or other visual style that you want to vary.
您不能在 SVG 中更改单个形状的各个部分的视觉样式（没有尚未可用的矢量效果模块）。相反，您需要为要改变的每个笔画或其他视觉样式创建单独的形状。
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:
特别是对于这种情况下的，而不是使用<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" />
You can see the effect of these in action here: http://jsfiddle.net/b5FrF/3/
您可以在此处查看这些操作的效果：http: //jsfiddle.net/b5FrF/3/
For more information, read about the <polyline>and more-powerful-but-more-confusing <path>shapes.
有关更多信息，请阅读<polyline>更强大但更令人困惑的<path>形状。
回答by wdebeaum
You could use a polyline for the three stroked sides, and just not put the stroke on the rectangle at all. I don't think SVG lets you apply different strokes to different parts of a path/shape, so you need to use multiple objects to get the same effect.
您可以为三个描边边使用多段线，而根本不要将描边放在矩形上。我不认为 SVG 允许您将不同的笔触应用于路径/形状的不同部分，因此您需要使用多个对象来获得相同的效果。
