在SVG中对四条线之间的区域进行着色

Question

在SVG中对四条线之间的区域进行着色

9

除了使用多边形的'fill'填充方法，还有什么方法可以着色四个点之间的区域吗？我已经使用四条线条绘制了一个多边形，如下：

<line x1="0" y1="0" x2="300" y2="0" style="stroke:rgb(255,0,0);stroke-width:2"></line>
<line x1="300" y1="0" x2="300" y2="150" style="stroke:rgb(255,0,0);stroke-width:2"></line>
<line x1="300" y1="150" x2="0" y2="150" style="stroke:rgb(255,0,0);stroke-width:2"></line>
<line x1="0" y1="150" x2="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:2"></line>

我想要给这些线之间的区域上色。

- Arun Anand

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Storey · Accepted Answer

并没有实际上填充的形状，因此你无法使用它来创建边框。你只是有四条线段碰巧相遇。

对于这种情况，使用 rect 会是更好的选择:

<rect x="0" y="0" width="300" height="150" fill="pink"/>

http://jsfiddle.net/nfxTE/

或者你可以使用一个折线并对其进行填充，而不是四个独立的线：

<polyline points="0,0 300,0 300,150 0,150 0,0"
style="fill: pink; stroke:red; stroke-width: 1"/>

如果不使用多边形、折线（或类似的方式）和填充，唯一的另一种方法是使用宽线条绘制单条直线：

http://jsfiddle.net/nfxTE/2/

<line x1="0" y1="75" x2="300" y2="75" style="stroke:red ;stroke-width:150"></line>

http://jsfiddle.net/nfxTE/1/

这个假设填充颜色和描边颜色相同。由于描边线条/形状是一半在内部，一半在外部，所以您必须将线条的坐标设置为所需起始点与描边宽度之间距离的一半。这里描边宽度为150，我们希望从0开始，因此y1和y2点设置为75。