Question

我想创建一个交互式SVG HTML-Page。例如：如果我单击一个矩形，我想显示一个新的SVG图像。

因为我的SVG文件是独立的，所以我希望通过HTML-Object Tag包含它们。

我已经浏览了网页了一段时间，但我没有通过修改我的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（），但这也没有用。

Answer 1

当没有设置（本地）服务器时，Chrome似乎无法加载对象。

我尝试了Microsoft Edge / IE，问题解决了。我可以访问SVG文件中的所有元素。

通过HTML对象标记

1 个答案: