如何在NGX-GRAPH中动态绑定SVG箭头标记的颜色

问题背景 #

我是SVG新手，在NGX-GRAPH中绘制的链接末尾带有箭头标记，需要让线条和箭头颜色根据设置保持一致，但找不到动态绑定箭头颜色的方法。按照NGX-GRAPH文档要求，链接模板必须使用带有line类的<svg:path>，尝试过多路径方案都失败了。目前通过marker-end结合url成功添加了箭头，但无法动态控制其颜色，相关代码如下：

<ng-template>
   <svg:marker id="arrowHead" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="8" markerHeight="8" orient="auto">
               <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
   </svg:marker>
</ng-template>

...

<ng-template #linkTemplate let-link>
   <svg:path class="line" [ngClass]="{'highlighted-item' : highlights.has(link.id)}" 
             [attr.stroke]="link.color" marker-end="url(#arrowHead)" >
   </svg:path>
</ng-template>

解决方案 #

SVG的marker元素默认不会自动继承引用它的线条颜色，通过currentColor属性可以实现颜色的动态同步，具体步骤如下：

1. 调整Marker定义：把箭头路径的fill属性设为currentColor，让箭头填充色继承外部元素的color属性值：

<ng-template>
  <svg:marker id="arrowHead" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="8" markerHeight="8" orient="auto">
    <!-- 用currentColor实现颜色继承 -->
    <svg:path d="M0,-5L10,0L0,5" fill="currentColor" />
  </svg:marker>
</ng-template>

2. 绑定线条的color属性：在链接的<svg:path>上，除了绑定stroke设置线条颜色，额外绑定color属性，让currentColor能获取到对应的值：

<ng-template #linkTemplate let-link>
  <svg:path class="line" 
            [ngClass]="{'highlighted-item' : highlights.has(link.id)}" 
            [attr.stroke]="link.color" 
            [attr.color]="link.color" 
            marker-end="url(#arrowHead)">
  </svg:path>
</ng-template>

3. 处理高亮状态：如果highlighted-item类需要修改颜色，只需同步调整stroke和color属性，箭头会自动跟随变化：

.highlighted-item {
  stroke: #ff0000 !important;
  color: #ff0000 !important;
}

原理说明 #

currentColor是CSS特殊值，代表当前元素的color属性值。通过将箭头的填充色绑定到该值，再把线条的color与link.color关联，就能实现箭头和线条颜色的动态同步，无需为每个链接创建独立marker，兼顾性能和灵活性。

内容的提问来源于stack exchange，提问作者Raziza O