Question

我正在尝试通过javascript更改SVG中圆圈的属性。当我将SVG直接嵌入HTML文件中时，它可以工作：＆＃39; kreis1＆＃39;单击按钮后会改变颜色。但是当我将SVG放在一个额外的文件中时（我希望当SVG有两个以上的圆圈时我最终会有这个），＆＃39; kreis1＆＃39;没有反应。

这是我的SVG文件，两个圈子：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<circle id="kreis1" fill="#8CC63F" stroke="#000000" cx="53.318" cy="55.5" r="50"/>
<circle id="kreis2" fill="#C44741" stroke="red" cx="138.786" cy="130" r="30" stroke-width="0"  
    onmouseover="evt.target.setAttribute('stroke-width','10');"
    onmouseout="evt.target.setAttribute('stroke-width','0');"/>
</svg>

...这是我的HTML：

<!DOCTYPE html>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<circle id="kreis1" fill="#8CC63F" stroke="#000000" cx="53.318" cy="55.5" r="50"/>
<circle id="kreis2" fill="#C44741" stroke="red" cx="138.786" cy="130" r="30" stroke-width="0"  
    onmouseover="evt.target.setAttribute('stroke-width','10');"
    onmouseout="evt.target.setAttribute('stroke-width','0');"/>
</svg>

<button onclick="getElementById('kreis1').innerHTML=changeColor()">Change!</button>

<object type="image/svg+xml" data="test.svg">

<html>

    <head>
        <script>
            var htmlDocument = document;
            function changeColor()
            {
                document.getElementById("kreis1").setAttribute("fill", "blue");
            }
        </script>
    </head>

</html>

Answer 1

test.svg是与html文档不同的文档。幸运的是，您可以通过<object>标记上的contentDocument字段获取test.svg文档。

<!DOCTYPE html>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<circle id="kreis1" fill="#8CC63F" stroke="#000000" cx="53.318" cy="55.5" r="50"/>
<circle id="kreis2" fill="#C44741" stroke="red" cx="138.786" cy="130" r="30" stroke-width="0"  
    onmouseover="evt.target.setAttribute('stroke-width','10');"
    onmouseout="evt.target.setAttribute('stroke-width','0');"/>
</svg>

<button onclick="getElementById('kreis1').innerHTML=changeColor()">Change!</button>

<object id="object1" type="image/svg+xml" data="test.svg">

<html>

    <head>
        <script>
            var htmlDocument = document;
            function changeColor()
            {
                document.getElementById("object1").contentDocument.getElementById("kreis1").setAttribute("fill", "blue");
            }
        </script>
    </head>

</html>

Answer 2

这是浏览器布局引擎的限制。外部SVG无法通过CSS设置样式。它们必须直接嵌入HTML中。根据罗伯特的回答，JavaScript确实允许通过对象标签进行交互。

如果您想沿着嵌入路线走下去（在我看来它更灵活）我已经开发了一个脚本来自动化这个嵌入，我有几个小时所以我会把它捆绑到今天早上可以重复使用的东西，并在完成后更新问题。

编辑：这是嵌入式插件，文档为：http://sakurasvg.appsondemand.com.au/

使用JavaScript的交互式SVG |嵌入还是不嵌入SVG？

2 个答案: