javascript - 如何导入 SVG 文件以便访问其属性？

Question

我有一个很大的 SVG，我需要访问它的“路径”进行修改。

我将 SVG 直接粘贴到我的应用程序中。但我想拆分我的代码并使其更清晰。 因此，我将 SVG 移到了 SVG 文件中，并且需要导入该 SVG 文件，以便可以访问其“路径”。

我发现的解决方案是使用 img 标签。但这样我就无法访问“路径”。

Answer 1

诀窍是使用 HTML“object”标签来嵌入 SVG。

<object type="image/svg+xml" data="src/beacon.svg" class="logo">
  Beacon Logo <!-- fallback image in CSS -->
</object>

执行此操作后，您可以使用“querySelector”定位“object”标签，然后使用“getSVGDocument()”方法访问 SVG 文档。之后，使用常规 Javascript 从文档中选择路径并根据需要进行操作。伪代码如下；

let svgDoc = document.querySelector("object.logo").getSVGDocument();
let svgPaths = svgDoc.querySelectorAll('path');