訪問和操作 object 標簽內的 svg 組

Question

例如，我有這個我知道如何操作的代碼：

<g id="box">
   <path class="st4" d="M893,577H359c-6.6,0-12-5.4-12-12V323c0-6.6,5.4-12,12-12h534c6.6,0,12,5.4,12,12v242
       C905,571.6,899.6,577,893,577z"/>
</g>
</svg>


<!--External calls-->
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>


</html>

我可以用這個 java 腳本 object 操作組“框”：

const svg = document.getElementById("box");

但如果我這樣做怎么辦：

<html>
    <object data="my_svg.svg"></object>


<!--External calls-->
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>


</html>

我怎樣才能在這個 object 標簽中訪問這個 svg 里面的盒子組？

Answer 1

只要 SVG 與您的頁面同源，您就可以通過對象的contentDocument訪問它。

<html>
    <object data="my_svg.svg" id="box"></object>
</html>

document.getElementById("box").contentDocument.children[0] // should be the svg element

訪問和操作 object 標簽內的 svg 組

問題描述

1 個解決方案

解決方案1
0 已采納 2020-05-24 00:11:22

訪問和操作 object 標簽內的 svg 組

問題描述

1 個解決方案

解決方案1 0 已采納 2020-05-24 00:11:22

解決方案1
0 已采納 2020-05-24 00:11:22