如何检测 SVG 是否包含特定符号？答案

【问题标题】：How can I detect if an SVG contains a specific symbol?如何检测 SVG 是否包含特定符号？
【发布时间】：2019-03-02 06:30:33
【问题描述】：

我正在使用带有如下符号的 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 上，我遇到了赛车状况问题。当 safari 触发 onload 时，<use> 标签的大小并不总是准备好。这意味着，有时我会得到大小，有时不会（这真的是随机的……）。我使用window.timeout(...) 暂时修复了它，但这不是解决赛车状况问题的正确方法。所以只是说，我想知道是否有更清洁的方法来实现同样的目标？

【问题讨论】：

您可以将其加载到
请问如果“aFile.svg”不包含“symbolName”你会怎么做？
@enxaneta 实际代码在 url 错误或找不到符号的情况下显示后备内容。
@RobertLongson 我试过了，但“对象”没有 getElementById。一旦加载了 svg，文档就不会搜索到对象。
@Anthony 已弃用，但 safari 12.0 仍不支持单独使用 href

标签： svg safari symbols

【解决方案1】：

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

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

【讨论】：