可以同时使用外部css样式表js文件和外部svg文件吗？

问题描述 投票：1回答：1

我想用外部的css js文件来修改外部的svg文件，但是，当把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>

我已经看到了多个建议的解决方案，但我没有看到它的功能。如果有人能解释这些或提出他们自己的解决方案，我将感激不尽。

  • Inline svg [我的地图文件有超过3000行的代码，而且很难读到html。]
  • 为map.svg提供一个单独的样式表[我似乎无法做到这一点]。
  • 在map.svg中加入内联css [我希望文件能分开，但我没看到js中也有类似的文件] 。
  • 有一个javascript注入[我似乎无法让这个工作，我相信这只是使用javascript文件动态添加svg文件中的路径元素，我愿意有一个单独的js文件或将其纳入到我的html js文件中，并且更喜欢这种方法]。

先谢谢了!

javascript html css svg
1个回答
1
投票

如果SVG文件有 同主机 你可以用 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.