簡體   English   中英

是否可以同時使用外部 css 樣式表/js 文件和外部 svg 文件?

[英]Is it possible to use both an external css stylesheet / js file and an external svg file?

I want to use external css / js files in altering an external svg file, however, upon "importing" the svg file into the html, its "subtags" such as path are not imported, and therefore the css and js cannot alter it.

<!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 [我的 map 文件有超過 3000 行代碼,並且很難閱讀 html]
  • 有一個單獨的 map.svg 樣式表 [我似乎沒有這項工作]
  • 有內聯 css 用於 map.svg [我想如果文件可以分開,我看不到 js 的等價物]
  • 有一個 javascript 注入 [我似乎無法完成這項工作,我相信這只是使用 javascript 文件來動態添加來自 svg 文件的路徑元素,我願意將其合並到我的文件中html js文件,更喜歡這種方法]

提前致謝!

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM