3

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

2 に答える 2

8

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>
于 2012-10-08T15:47:10.723 に答える
2

SVGを（SVGタグを使用して）HTMLコードに直接埋め込んでみませんか？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のこのソリューションでも説明されています（あなたはそれにリンクを投稿しました）。;）

于 2012-10-08T15:58:52.440 に答える