通过HTML对象标记的交互式SVG

我想创建一个交互式的SVG HTML-Page。例如：如果我点击一个矩形，我想显示一个新的SVG图像。通过HTML对象标记的交互式SVG

因为我的SVG文件是分开的，我想通过HTML对象标签包含它们。

我浏览了一会儿网，但我只是不ADRESS我的SVG-文件的单一元素，以改变他们的属性或添加功能等

我的HTML文件：

<!DOCTYPE html> 
<html> 
<body> 
<object data="svg-test.svg" type="image/svg+xml" id="svg" width="100%" height="100%"></object> 

    <script> 
    window.onload=function() { 
    // Get the Object by ID 
    var svgObject = document.getElementById("svg"); 
    // Get the SVG document inside the Object tag 
    var svgDoc = svgObject.contentDocument; 
    // Get one of the SVG items by ID; 
    var svgItem = svgDoc.getElementById("svgID"); 
    // Set the colour to something else 
    svgItem.setAttribute("fill", "lime"); 
    }; 
    </script> 


</body> 
</html>

的SVG-文件：

<svg width="900" height="600" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <rect x="100" y="120" width="200" height="350"  
    style="fill:white;stroke:black;stroke-width:2;fill-opacity:1.0;stroke-opacity:1.0" 
    id="svgID"/> 

</svg>

而不是使用contentDocument我也试过getSVGDocument（）但这也没有奏效。

来源

2016-05-17 SimpleFlow

在我的情况下，contentDocument不起作用（或者至少不是在某些浏览器中），因为我还没有等待

通过HTML对象标记的交互式SVG

回答

相关问题