Question

我想在更改外部svg文件时使用外部css / js文件，但是，在将“ svg”文件“导入”到html中时，其“子标签”（例如path）不会被导入，因此css和js无法修改它。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <object data="map.svg" type="image/svg+xml"></object>
                <script src="map.js"></script>
    </body>
</html>

我已经看到了许多提议的解决方案，但我认为它们没有起作用。如果有人可以解释这些或提出自己的建议，我将很感激。

内联svg [我的地图文件包含3000余行代码，并且很难读取html]
为map.svg拥有单独的样式表[我似乎没有这项工作]
具有用于map.svg的内联CSS [我想知道文件是否可以分离并且我看不到js的等效语言]
进行javascript注入[我似乎无法完成这项工作，并且我相信这只是使用javascript文件从svg文件中动态添加路径元素，我愿意拥有一个单独的js文件或合并它放入我的html js文件中，并且更喜欢这种方法]

谢谢！

Answer 1

如果SVG具有same host as a document，则可以使用getSVGDocument从JavaScript中获取SVG文档

    <object id="map" data="js.svg" type="image/svg+xml"></object>
    <script>
      const mapObject = document.getElementById("map");
      mapObject.addEventListener("load", () => {
        mapObject
          .getSVGDocument()
          .querySelector("path")
          .setAttribute("fill", "red");
      });
    </script>

是否可以同时使用外部CSS样式表/ js文件和外部svg文件？

1 个答案: