访问和操作 object 标签内的 svg 组

Question

For exemple, i have this code that i know how to manipulate:例如，我有这个我知道如何操作的代码：

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

i can manipulate the group "box" with this java script object:我可以用这个 java 脚本 object 操作组“框”：

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

but what if i do that:但如果我这样做怎么办：

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


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


</html>

How can i acess the box group that is inside this svg in this object tag?我怎样才能在这个 object 标签中访问这个 svg 里面的盒子组？

Answer 1

As long as the SVG is of the same origin as your page, you can access it through the object's contentDocument .只要 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