问题及背景
用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>
小感慨
基础知识要牢记,且开发中要谨记