Jur*_*man 3 html javascript svg dom
我有一个SVG文档,其中绘制了三个圆圈:
<?xml version="1.0"?>
<svg width="450" height="80" xmlns="http://www.w3.org/2000/svg">
<script>
document.fillCircle = function(id) {
var circles = document.getElementsByTagName('circle'),
circle = document.getElementById(id);
[].forEach.call(circles, function(circle) {
circle.setAttribute('fill','#ffffff');
});
circle.setAttribute('fill', '#000000');
}
</script>
<g>
<line y1="35" x1="35" y2="35" x2="375" stroke-width="3" stroke="#000000"/>
<circle id="state1" r="30" cy="35" cx="35" stroke-width="3" stroke="#000000" fill="#ffffff" onclick="fillCircle(this.id);"/>
<circle id="state2" r="30" cy="35" cx="205" stroke-width="3" stroke="#000000" fill="#ffffff" onclick="fillCircle(this.id);"/>
<circle id="state3" r="30" cy="35" cx="375" stroke-width="3" stroke="#000000" fill="#ffffff" onclick="fillCircle(this.id);"/>
</g>
</svg>
出于测试目的,我有onclick=""方法,但实际上这个文档是我的html文档中的一个对象:
<object id="test" data="test-vector.svg" width="100px" height="100px"></object>
我有一个数据集,这三个圆圈显示每个项目的"进度".我通过从服务器中提取新列表来定期更新JSON集.对于每个更改的项目,我想更新已填充的圆圈.
我想根据一些javascript更新svg.但是,我无法进入SVG的DOM.我真的不在乎是否在fillCircle()svg内部,如果我必须使用<embed>,<object>或其他东西,但这种javascript对我不起作用.
<html>
<body>
<object id="test" data="test-vector.svg"></object>
<script>
var svg = document.getElementById('test');
console.log(svg);
svg.fillCircle('state2');
</script>
</body>
</html>
我尝试了几个我在SO上发现的东西,比如这个和这个,但无论我测试什么,例外总是:
Uncaught TypeError: Object #<HTMLObjectElement> has no method 'fillCircle'
var object = document.getElementById("test")会得到你的对象元素,但是在对象加载之前你不能调用它.完成后,您可以使用object.contentDocument对嵌入的svg文档执行操作.
<html>
<body>
<object id="test" data="test-vector.svg" onload="f()" ></object>
<script>
function f() {
var svg = document.getElementById('test');
svg.contentDocument.fillCircle('state2');
}
</script>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
8206 次 |
| 最近记录： |