如何导入 SVG 文件以便访问其属性？答案

【问题标题】：How do I import a SVG file so that I can access its properties?如何导入 SVG 文件以便访问其属性？
【发布时间】：2021-01-15 03:31:38
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript html css svg import

【解决方案1】：

诀窍是使用 HTML“对象”标签嵌入 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');

【讨论】：

【解决方案2】：

我也使用非常大的 SVG 文件。我的 SVG 使用分配了 css 属性的单独组 (g) 进行组织。然后，我可以使用 Greensock (gsap) 来制作动画。棘手的部分是 SVG 非常敏感。对于基于路径的动画，它们必须放在 html 中（不链接到 svg 文件）。

因此，为了克服您所描述的混乱情况。我开始创建我所谓的“内容块”。您创建一个内容块，例如 large-svg-file.html，然后对预期页面使用单行“包含”脚本。如果您希望在不同的网页上使用此内容块，这也很方便。

示例：@@include('./blocks/large-svg-file.html')

注意：我通常将这些文件放在一个名为“blocks”的文件夹中，以将它们与主要的 html 文件分开。

我不确定您使用的是 PHP、Grunt、Gulp（服务器端包含）还是其他；但是，遗憾的是没有仅包含 html 的代码。因此，您需要选择自己喜欢的解决方案。这是一个很棒的教程，向您展示如何应用您选择的选项：https://css-tricks.com/the-simplest-ways-to-handle-html-includes/

【讨论】：

顺便说一句，如果您使用 Adobe Illustrator 之类的软件来创建图像，您可以为图层命名，这将成为分配 css 规则的“g”名称。将所有层组合在一起并命名父层作为包装器。这样，如果您调整插图，您可以轻松导出，而无需返回分配 css 属性。
我很高兴，Levi007

【解决方案3】：

您可以在任何浏览器中打开它并检查代码并复制它。并放入一个html文件进行修改。

【讨论】：

我不想将 SVG 放在 HTML 中。因为它非常大。我有一个 SVG 文件，我想导入它。

【解决方案4】：

你不能在文件顶部导入它，比如“import {svgName} from 'path relative to current file';” ?

【讨论】：