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

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

我直接在我的应用程序中粘贴了SVG。但是我想把我的代码分开，让它更清楚。 因此，我将我的SVG移动到一个SVG文件中，我需要导入SVG文件，以便访问它的“路径”

---

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

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

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

你不能像“从‘相对于当前文件的路径’导入{svgName}”那样在文件顶部导入它吗？

你不能像“从‘相对于当前文件的路径’导入{svgName}”那样在文件顶部导入它吗？

诀窍是使用html“object”标记嵌入SVG

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

---

诀窍是使用HTML“object”标记嵌入SVG

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

---

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

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

示例：@@include（“./blocks/large svg file.html”）

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

---

我不确定您是否在使用PHP、Grunt、Gulp（服务器端包含）或其他任何东西；但是，令人遗憾的是，没有包含仅为html的代码。因此，您需要选择您最喜欢的解决方案。这里有一个很棒的教程，向您展示了如何应用您选择的选项：

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

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

示例：@@include（“./blocks/large svg file.html”）

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

---

我不确定您是否在使用PHP、Grunt、Gulp（服务器端包含）或其他任何东西；但是，令人遗憾的是，没有包含仅为html的代码。因此，您需要选择您最喜欢的解决方案。这里有一个很棒的教程，向您展示了如何应用您选择的选项：

我不想将SVG放在HTML中。因为它很大。我有一个SVG文件，我想导入它。我不想把SVG放在HTML中。因为它很大。我有一个SVG文件，我想导入它。顺便说一下，如果您使用Adobe Illustrator之类的软件来创建图像，您可以命名层，这些层将成为“g”名称，用于指定css规则。将所有层组合在一起，并为包装器命名父层。这样，如果您调整了插图，就可以轻松导出，而无需返回指定css属性。Levi007顺便说一句，我很高兴，如果您使用Adobe Illustrator之类的软件创建图像，您可以命名图层，这些图层将成为“g”名称，用于指定css规则。将所有层组合在一起，并为包装器命名父层。这样，如果你调整你的插图，你就可以很容易地导出，而不必回去指定css属性