javascript - 访问和操作对象标签内的 svg 组
问题描述
例如,我有这个我知道如何操作的代码:
<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 脚本对象操作组“框”:
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>
如何访问此对象标签中此 svg 内的框组?
解决方案
只要 SVG 与您的页面同源,您就可以通过对象的contentDocument访问它。
<html>
<object data="my_svg.svg" id="box"></object>
</html>
document.getElementById("box").contentDocument.children[0] // should be the svg element
推荐阅读
- javascript - 在输入文本框中只允许英文小写字母
- swift - Swift 4.2 获取 URLError.UnderlyingCocoaError 的方法
- c++ - 为什么 istream 不支持右值提取
- racket - Racket:将视频渲染到画布上
- javascript - 多步表格 | 使用ajax提交表单
- python - Python类属性与全局变量
- node.js - 在 CryptoJS 中加密并在 NodeJS 加密模块中解密
- javascript - 有没有办法即时创建和下载反应组件?
- python - Python progressbar2-在进度条下显示文件名
- swift - 如何用它的搜索结果快速更新 textField.text