通過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

回答

相關問題