在html javascript函数中调用svg javascript函数

Question

我有一个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'

Answer 1

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>

Answer 2

为什么不直接在您的HTML代码中嵌入SVG（使用SVG标签）？ 根据W3 ，这适用于所有现代浏览器（和IE> = 9）。 使用JS访问和更改圆圈的属性是微不足道的......

<html>
    <body>
        <svg>...</svg>
    </body>
</html>

如果您想保留HTML / SVG结构，可以执行以下操作：

var svg = document.getElementById("test");
svg.onload = function(){
    svg.contentDocument.fillCircle("state2");
};

诀窍是等待SVG对象加载（ onload事件）; 在此之前，您可以安全地使用contentDocument属性。 顺便说一句，这个也在SO的解决方案中描述（你发布了一个链接）。 ;）