同一HTML嵌入多个pdftocairo转换的inline SVG显示异常是什么原因

• 核心诱因是pdftocairo导出的SVG存在全局ID重复冲突。
• pdftocairo从PDF转换生成SVG时，会为SVG内部的渐变、剪切路径、蒙版、复用图形组等元素自动生成固定规则的命名ID，比如id="g1"、id="linearGradient0"、id="clipPath2"这类通用序号命名。
• 单个SVG单独打开、或者单独嵌入HTML时，当前上下文内ID唯一，所以渲染完全正常；当多个同工具转换的SVG以内联形式插入同一个HTML页面后，HTML DOM要求全局ID唯一，后续SVG引用自身内部资源时，浏览器会优先匹配整个页面里第一个出现的同名ID元素，从而出现样式错乱、图形变形、内容缺失等渲染异常。
• 你可以直接打开任意两个转换后的SVG源码，搜索id属性即可发现大量重复命名，对应的资源引用语法如fill="url(#linearGradient0)"也完全一致，即可验证该问题。

内容的提问来源于stack exchange，提问作者J.W Kang