在html javascript函数里面调用svg javascript函数 [英] Call svg javascript function inside html javascript function
问题描述
我有一个SVG文档，其中绘制了三个圆圈：
<？xml version =1.0？>
< svg width =450height =80xmlns =http://www.w3.org/2000/svg>
< script>
document.fillCircle = function（id）{
var circles = document.getElementsByTagName（'circle'），
circle = document.getElementById（id）;
[] .forEach.call（圈子，函数（圆圈）{
circle.setAttribute（'fill'，'＃ffffff'）;
}）;
circle.setAttribute（'fill'，'＃000000'）;
}
< / script>
< g>
< / svg>
出于测试目的，我有 onclick =方法，但实际上这个文档是我的html文档中的一个对象：
< object id =testdata = test-vector.svgwidth =100pxheight =100px>< / object>
我有一个数据集，这三个圆圈显示每个项目的进度。我定期通过从服务器拉出新列表来更新JSON集。对于每一项改变，我想更新实心圆。
我想根据一些javascript更新svg。但是，我无法让它进入SVG的DOM。我真的不在乎 fillCircle（）是否在svg中，如果我必须使用< embed> ，< object> 或别的东西，但这种javascript对我不起作用。
< HTML>
< body>
< object id =testdata =test-vector.svg>< / object>
< script>
var svg = document.getElementById（'test'）;
console.log（svg）;
svg.fillCircle（'state2'）;
< / script>
< / body>
< / html>
我尝试了几个我在SO上找到的东西，比如这一个和，但无论我测试什么，这个例外总是：
/ p>
Uncaught TypeError：Object＃< HTMLObjectElement>没有方法'fillCircle'
var object = document.getElementById（test）会让你获得对象元素，但直到对象加载完毕才能调用它。一旦你有了，你可以使用object.contentDocument来处理嵌入式svg文档。
< html>
< body>
< script>
函数f（）{
var svg = document.getElementById（'test'）;
svg.contentDocument.fillCircle（'state2'）;
}
< / script>
< / body>
< / html>
I have a SVG document where three circles are drawn:
<?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>
For testing purposes I have the onclick="" method, but actually this document is an object in my html document:
<object id="test" data="test-vector.svg" width="100px" height="100px"></object>
I have a dataset and these three circles show the "progress" of every item. I regularly update the JSON set by pulling the new list from the server. For every item changed, I want to update the filled circle.
I would like to update the svg based on some javascript. However, I can't make it to get into the DOM of the SVG. I do not really care if the fillCircle() is inside the svg or not and if I have to use <embed>, <object> or something else, but this kind of javascript does not work for me.
<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>
I tried several things I found on SO, like this one and this one, but whatever I test, the exception is always:
Uncaught TypeError: Object #<HTMLObjectElement> has no method 'fillCircle'
var object = document.getElementById("test") will get you the object element but you can't call that till the object has loaded. Once you have that you can use object.contentDocument to do things with the embedded svg document.
<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>
这篇关于在html javascript函数里面调用svg javascript函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
