如何解决路径填充颜色

时间:2015-04-27 07:18:24

标签: javascript svg

这是我的代码,

<svg height="210" width="400">
  <path stroke="#C4C24A" fill="red" d="M50 50 L100 50 L100 100 L150 100" />
</svg>

在这段代码中我使用了填充和描边,同时运行此填充和描边都应用了。在这里我使用了MoveTo LineTo LineTo ...

另一个,

<svg height="210" width="400">
  <path stroke="#C4C24A" fill="red" d="M50 50 L100 50 
  M100 50 L100 100 
  M100 100 L150 100" />  
</svg>

在这段代码中,我使用了MoveTo LineTo MoveTo LineTo ..此处显示相同的输出,但未应用填充颜色..

为什么呢?在第一个例子中,我需要显示输出而不应用填充颜色我可以做什么而不改变路径和填充?

1 个答案:

答案 0 :(得分:3)

这个例子可能会澄清它:

<svg height="210" width="400">
  <path stroke="#C4C24A" fill="red" d="
    M50 50
    L100 50
    L100 100
    L150 100
    M250 50
    L300 50
    L300 100
    L350 100" />
</svg>

如果您有两个以上的点,路径将创建一个多边形。用两个点你就行了。每次使用M举起笔时,都是从头开始。

所以在你的第一个例子中,你正在制作一个四点多边形。在第二个示例中,您将生成三个断开的行。您可以填充四点多边形,但是线条太薄而无法填充。