如何仅使用一条路径在另一个三角形内创建SVG三角形?

时间:2015-10-07 01:02:37

标签: html5 svg vector

What is supposed to be created

大家好, 我试图创建一些看起来像使用SVG路径的东西,我只能使用一个路径。到目前为止,我所拥有的只是大三角形。我知道要在里面做一个小的我需要添加更多的停止点,但我似乎无法弄清楚所需的确切点。请帮帮我。

这是我到目前为止所做的:

<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 960 960">

  <path d="M350 0 L275 90 L425 90 Z"  fill="none" stroke-width="5" stroke="purple"/>


</svg>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

您可以使用M <path>属性中的d命令在不绘制线条的情况下移动虚拟笔。这样,您就可以将笔移动到下一个位置,并使用新位置的L命令开始一个新行。您可以使用这些命令的任意组合来移动虚拟笔并绘制线条。以下内容应给出所需的输出:

<path d="M350 0 L275 90 L425 90 L350 0 M312.5 45 L387.5 45 L350 90 L312.5 45"  
      fill="none" stroke-width="1" stroke="purple"/>

您可能需要查看此tutorial以获取一些示例以及可用于绘制路径的命令说明。