分别设置svg <defs>的每个实例的样式

Question

我有一个<svg>元素（一个箭头），它使用一个<defs>标签（包含一个三角形箭头<marker>）。我多次重复使用此元素，每次使用不同的颜色。我的问题是，<defs>标签都共享相同的CSS样式，即使常规的HTML / CSS级联规则规定不应这样做。这意味着<svg>元素的每个实例的大多数样式都不同，但<defs>标记却没有。我的目标是使箭头具有多种不同的颜色，但是只有箭头线会改变颜色（蓝色，黄色，绿色，红色）；箭头都是相同的颜色（红色）。

我已经找到了关于这个问题Angular svg different instances sharing same defs的解决方案，但是对于这样一个简单的目标，它似乎非常笨拙，并且可能过于复杂（我也使用了angular，但这并不重要）问题）。

有没有更简单/更干净的方法？

---

我认为这些细节无关紧要，但这是箭头的代码：

<svg width="32" height="10">
  <defs>
    <marker
      id="arrow-head"
      markerWidth="7.92820323"
      markerHeight="10"
      refY="5"
      orient="auto"
    >
      <!--Equilateral triangle-->
      <path d="M0,1 L0,9 L6.92820323,5 Z"></path>
    </marker>
  </defs>
  <path class="line" d="M 0,5 L 24,5"></path>
</svg>

下面是将其着色为绿色的示例：

svg {
  color: var(--green);
  fill: var(--green);
  stroke: var(--green);
}