文章/答案/技术大牛

发布

社区首页 >问答首页 >是否可以同时使用外部css样式表/ js文件和外部svg文件？

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

Stack Overflow用户

提问于 2020-06-01 05:51:45

回答 1查看 60关注 0票数 1

我希望在修改外部svg文件时使用外部css / js文件，但是，在将svg文件“导入”到html中时，它的“子标记”(如路径)不会被导入，因此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文件中，并且更喜欢这种方法。

提前感谢！

javascript

html

css

svg

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-01 13:50:21

如果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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62126404

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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