如何检测 SVG 是否包含特定符号?

Question

我正在使用一个带有符号的 svg 文件，如下所示：

<svg xmlns="http://www.w3.org/2000/svg">
<use xlink:href="aFile.svg#symbolName"/>
</svg>

现在我想知道"aFile.svg"是否真的包含"symbolName"，如果没有，只需引发异常。现在，我确实在<use>标签上放置了一个事件onload。加载<use>时，我会getBoundingClientRect()检查内容的项目大小。如果尺寸大于0,0则表示我们确实有一个项目。

一切都很好，直到我尝试使用Safari。在 Safari 上，我遇到了赛车状况问题。当野生动物园火灾onload时，<use>标签的大小并不总是准备好的。这意味着，有时我会得到尺寸，有时不会(这真的很随机......我暂时使用window.timeout(...)修复了它，但这不是解决赛车条件问题的正确方法。所以只是说，我想知道是否有一种更清洁的方法来实现相同的目标？

Answer 1

您可能无法直接执行此操作。如果您首先将文件aFile.svg注入 DOM，您只需使用querySelector()来检测符号是否可用。

对于注入 SVG 文件，这样可能很有用：https://css-tricks.com/ajaxing-svg-sprite/