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

原创于 2023-01-05 17:57:48 发布 · 857 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

文章讲述了在使用SVG开发tree组件时遇到的问题，即由于多个组件复用导致marker标签ID冲突，从而影响渲染。作者指出DOM中ID的唯一性原则，并分享了解决方案——为marker标签ID赋予动态属性值，确保每个组件的独立性。

问题及背景

用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>