Javascript 重复SVG路径

假设我有以下箭头，我想在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

• 有

除了从javascript注入内容之外，还有什么方法可以避免复制整个内容吗？

实际上支持

，因为它是文档“允许的内容”部分中列出的“形状元素”。然而，

本身并没有什么作用，它只是一种组织SVG的语义方式。你要找的是

和

定义一个可以使用和重复使用的模板

创建给定符号的实例

---

此答案作为JCD答案的扩展提供，以显示此处不需要的

所提供的OP what I<代码>元素提供了一些简单地重用元素时不需要的功能

此处不需要符号。你可以把你的路径放在

部分并直接引用它。我的箭头路径从右向左的原因是我仍然在学习SVG这一事实的历史产物。我想翻转箭头，但当时我不知道

transform=scale（1，-1）

hehe.@PaulLeBeau，你能举个例子说明一下吗（也许可以编辑这个答案）？如果有另一种方法，可能更简单，发布它将是非常好的。我提供了一个额外的答案来说明我的意思。谢谢大家指导我完成！我真的很感激！我标记另一个答案是因为它更完整，但我会给你一个赏金（或尽快给你），作为我的感激之情。只有一件事：我想使用CSS对其进行样式化，以获得鼠标悬停等效果。例如，如果我做了

，然后

箭头悬停{fill:red}

，我似乎能够做到这一点。但是我可以直接将

样式化吗？（我似乎不能）你所说的规则行不通。你是说

。箭头：悬停{}

？您可以直接设置

的样式（只要删除

fill=“black”

），但不能对其执行

：悬停
规则，因为通过
引用时，它不会出现在DOM树中，并且不能单独设置样式。我的意思是与其他实例分开。是的，我的意思是
.arrow
。。。！好吧，我现在明白发生了什么。。。谢谢我认为你们真的应该接受JCDs的答案。他为你的问题提供了主要的解决办法。我只是澄清了一些观点。