在SVG中强制执行defs的相对链接

Question

我试图在一个页面上绘制多个SVG，并且每个SVG的defs部分中的ID都发生冲突。我希望每个人只能在他们自己的defs中引用面具。目前，他们都使用在页面上的第一个svg上具有匹配id的掩码。没有svg知道其他人，所以他们将不得不依赖随机数生成器来挑选（希望）不同的ID。

如果将SVG加载到同一网页中，是否可能或者它们是否需要唯一ID？它们是由d3动态创建的。

<svg>
    <defs>
        <mask id="temperatureMask">
            <rect width="100%" height="100%" fill="#ffffff">
        </mask>
    </defs>
    <rect mask="#temperaureMask">…etc
</svg>


<svg>
    <defs>
        <mask id="temperatureMask">
            <rect width="100%" height="50%" fill="#dddddd">
        </mask>
    </defs>
    <rect mask="#temperaureMask">…etc
</svg>

Answer 1

页面上的ID必须是唯一的。这包括任何内联SVG。你需要改变你的d3脚本，就像你建议在id上添加一个唯一的数字等。