如何为svg着色：标记线的颜色答案

【问题标题】：How to color svg:marker to the color of the line如何为svg着色：标记线的颜色
【发布时间】：2020-01-23 09:23:17
【问题描述】：

我有以下用于生成箭头线的 ng 模板：

<ng-template #linkTemplate let-link>
            <svg:g class="edge">
                <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4"
                    orient="auto">
                    <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
                </svg:marker>
                <svg:path class="line" [attr.stroke]="link.color" stroke-width="2" marker-end="url(#arrow)">
                </svg:path>                    
            </svg:g>
        </ng-template>

如何将箭头着色为 link.color 变量中指定的颜色？

【问题讨论】：

用相同颜色（link.color）填充marker的路径
嗨@enxaneta，因为路径引用了 svg:marker，因此只有一个实例退出，因此对所有箭头应用相同的颜色。我需要使每个路径的箭头唯一。
如果您能提供一个 jsfiddle / codepen / codesandbox.io 工作示例 - 更多人可以回答，甚至回答得更快
你的marker id需要生成而不是固定的。目前，您正在创建具有相同 id 值的多个元素，这是不允许的。每条路径都需要一个标记，我想你已经有了。
嗨@RobertLongson 你知道如何生成它吗？我试过这样的事情：但没有运气

标签： css angular svg

【解决方案1】：

诀窍是为箭头定义两个模板并相应地从行路径引用。

<ng-template #linkTemplate let-link>
                <svg:g class="edge">
                    <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
                        <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
                    </svg:marker>
                    <svg:marker id="arrow-sel" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
                        <svg:path d="M0,-5L10,0L0,5" class="arrow-head-sel" />
                    </svg:marker>
                    <svg:path class="line" [attr.stroke]="link.color" stroke-width="2" [attr.marker-end]="link.color === undefined ? 'url(#arrow)' : 'url(#arrow-sel)'">
                    </svg:path>           
                </svg:g>
            </ng-template>

【讨论】：