我的第一张svg图片

Question

我在svg上第一次使用标签<path>，并且想知道是否有更好的方法可以做到这一点。它按照我想要的方式出现，在这些区域只有黑色，其余区域为透明（不仅仅是白色）。

我的代码：

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M200 10 L10 10 L30 30 L50 30 L50 35 L35 35 L35 70 L30 70 L30 30 L10 10 L10 160 L50 120 L50 160 L80 160 L160 80 L160 50 L130 50 L50 130 L50 120 L160 10 L170 10 L150 30 L180 30 L180 60 L200 40 L200 50 L50 200 L40 200 L60 180 L30 180 L30 150 L10 170 L10 200 L200 200 L180 180 L160 180 L160 175 L175 175 L175 140 L180 140 L180 180 L200 200 Z" />
</svg>

视觉路径（从绿球开始，沿橙色线直到红色球，Z =近路不需要蓝线）：

我只使用L，因为我还需要了解其他人的工作方式。我认为M开始Z结束。

我的学习方式是通过测试和阅读更少。那么，对于开始学习svg的人的任何建议，不仅仅是指向begginers指南或教程的链接？这可能会得到一些帮助。

Answer 1

假设你想要＆＃34; L＆＃34;形状是洞 - 这是你想要的 - 然后你应该使用子路径。 IE浏览器。使用＆＃34;移动＆＃34; path命令（＆＃34; M＆＃34;）。你不应该像现在这样使用连接线从一种形状跳到另一种形状，原因有二：

1. 根据渲染器的不同，有时可以看到那些零宽度的条子。特别是对于某些颜色组合。
2. 如果您愿意，您无法在形状上使用笔触颜色。例如：
＆＃13;
＆＃13;
<svg width="200" height="200">
  <path d="M200 10 L10 10 L30 30 L50 30 L50 35 L35 35 L35 70 L30 70 L30 30 L10 10 L10 160 L50 120 L50 160 L80 160 L160 80 L160 50 L130 50 L50 130 L50 120 L160 10 L170 10 L150 30 L180 30 L180 60 L200 40 L200 50 L50 200 L40 200 L60 180 L30 180 L30 150 L10 170 L10 200 L200 200 L180 180 L160 180 L160 175 L175 175 L175 140 L180 140 L180 180 L200 200 Z" stroke="green" stroke-width="4"/>
</svg>
＆＃13;
＆＃13;
＆＃13;

以下是你应该如何做的事情：

为路径中的每个单独形状创建封闭路径。

// top left triangle
M 10 10 L 10 160 L 160 10 Z
// top left 'L'
M 30 30 L 50 30 L50 35 L35 35 L35 70 L30 70 Z
// central shape
M 50 130 L 50 160 L 80 160 L 160 80 L 160 50 L 130 50 L 50 130 Z
// top right chevron
M 170 10 L 150 30 L 180 30 L 180 60 L 200 40 L 200 10 Z 
// bottom right triangle
M 200 50 L 50 200 L 200 200 Z
// bottom right 'L'
M 40 200 L 60 180 L 30 180 L 30 150 L 10 170 L 10 200 Z
// bottom left chevron
M 180 180 L 160 180 L 160 175 L 175 175 L 175 140 L 180 140 Z

将这些全部合并到一个路径中，您就可以获得所需的结果。见下文。

在路径重叠/交叉的地方，它们通常会形成洞。有时他们不会，但如果你对你用来定义路径的方向（顺时针或逆时针）保持一致，他们就会这样做。

＆＃13;
＆＃13;
<svg width="220" height="220">

  <path d="M 10 10 L 10 160 L 160 10 Z
           M 30 30 L 50 30 L50 35 L35 35 L35 70 L30 70 Z
           M 50 130 L 50 160 L 80 160 L 160 80 L 160 50 L 130 50 L 50 130 Z
           M 170 10 L 150 30 L 180 30 L 180 60 L 200 40 L 200 10 Z 
           M 200 50 L 50 200 L 200 200 Z
           M 40 200 L 60 180 L 30 180 L 30 150 L 10 170 L 10 200 Z
           M 180 180 L 160 180 L 160 175 L 175 175 L 175 140 L 180 140 Z"  stroke="green" stroke-width="4"/>

</svg>
＆＃13;
＆＃13;
＆＃13;

Answer 2

SVG。我该怎么做：

以下是填充规则的工作原理：MDN fill-rule
之后虽然我会使用MDN polygon

＆＃13;

＆＃13;

<svg viewBox="0 0 100 100">
  <!--Middle element -->
  <path d="M25,75, 25,62.5 62.5,25 75,25 75,37.5 37.5,75 25,75 Z" />
  <!--Corners -->
  <path d="M 100,0 100,12.5 87.5,25 87.5,12.5 75,12.5 87.5,0Z" />
  <!-- Look how all the numbers are opposite of the ones above!-->
  <path d="M 0,100 12.5,100 25,87.5 12.5,87.5 12.5,75 0,87.5Z" />
  <!-- shape within a shape with fill rule-->
  <path fill-rule="evenodd" d="M 0,0 75,0 0,75 
                               M12.5,12.5 20,12.5 20,15 15,15 15,30 12.5,30" />
  <path fill-rule="evenodd" d="M 100,100 25,100 100,25
                               M87.5,87.5 80,87.5 80,85 85,85 85,70 87.5,70" />
</svg>

＆＃13;

＆＃13;

＆＃13;

（个人观点）通过在不同路径中设置形状，更容易阅读代码。