重复SVG路径

Question

假设我有以下箭头,我想在svg内的不同位置重复几次:

<svg width="400" height="400">
<path transform="translate(150,100)" fill="black" d="M 0.5,0.5 l-100,0 -25,20 25,20 100,0 z" />
<path transform="translate(300,200)" fill="black" d="M 0.5,0.5 l-100,0 -25,20 25,20 100,0 z" />
<path transform="translate(150,300)" fill="black" d="M 0.5,0.5 l-100,0 -25,20 25,20 100,0 z" />
</svg>

我可能希望将来改变路径形状,所以我宁愿避免d在整个地方复制粘贴属性.

是否有可能在某处定义路径的形状,然后把它放在不同的x,y坐标,而不从JavaScript操作呢？

两个想法:

• d 是一个属性,而不是属性,所以我们不能使用CSS AFAIK
• <defs>似乎不支持路径

有没有办法避免复制过去整个事情,没有从javascript注入它？

Answer 1

此答案作为 JCD 答案的扩展提供，以便向 OP 展示我在<symbol>这里不需要的内容。 <symbol>元素提供了一些在您简单地重用元素时不需要的功能。

<svg width="400" height="400">
  <defs>
    <path id="mypath" fill="black" d="M 0,20 l25,20 100,0 0,-40 -100,0 z" />
  </defs>
  <use xlink:href="#mypath" x="50" y="100" />
  <use xlink:href="#mypath" x="200" y="200" />
  <use xlink:href="#mypath" x="50" y="300" />
</svg>

Answer 2

<defs>确实支持<path>,因为它是文档"允许的内容"部分下列出的"形状元素".然而,<defs>它本身并没有做太多,它只是一种组织SVG的语义方式.你要找的是<symbol>和<use>.

<symbol> 定义可以使用和重用的模板.

<use> 创建给定符号的实例.

<svg width="400" height="400">
  <defs>
    <symbol id="mypath">
      <path fill="black" d="M 0,20 l25,20 100,0 0,-40 -100,0 z" />
    </symbol>
  </defs>
  <use xlink:href="#mypath" x="50" y="100" />
  <use xlink:href="#mypath" x="200" y="200" />
  <use xlink:href="#mypath" x="50" y="300" />
</svg>

您的<path>数据有点奇怪,因为它从元素的左侧开始,然后继续向左绘制,需要transform属性.请注意我是如何在上面的代码片段中开始的(从元素的左边缘开始,并且从不进一步向左绘制),这样做效果更好,不需要transform避免意外裁剪.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol