多个svg渲染path时复用相同的defs market造成的market渲染异常及解决办法

问题及背景

用svg开发了个tree组件，path的箭头用的defs + marker标签

<defs>
<marker id="linkArrow" viewBox="0 0 10 6" refX="5" refY="0" markerWidth="10" markerHeight="6" orient="180">
<path d="M 5 0 L 0 6 L 10 6z" fill="#76788B" style="stroke-width: 0;"></path>
</marker>
</defs>

当同一个dom下复用多次tree组件时，market渲染异常，有时候显示有时候不显示。

问题原因

属于html的基础知识了，dom下标签的id是不能重复的，开始时我忽略了这个问题，结果很打脸

解决方法

知道原因后解决方法也就呼之欲出了，在组件中为market标签的id赋动态属性值，效果如下：

<marker id="linkArrow1672911474088" viewBox="0 0 10 6" refX="5" refY="0" markerWidth="10" markerHeight="6" orient="180">
<path d="M 5 0 L 0 6 L 10 6z" fill="#76788B" style="stroke-width: 0;"></path>
</marker>

小感慨

基础知识要牢记，且开发中要谨记