文章/答案/技术大牛

发布

社区首页 >问答首页 >基于HTML对象标签的交互式SVG

问基于HTML对象标签的交互式SVG
EN

Stack Overflow用户

提问于 2016-05-17 21:34:09

回答 1查看 1.6K关注 0票数 2

我想要创建一个交互式的SVG HTML页面。例如:如果我单击一个矩形，我想要显示一个新的SVG。

因为我的SVG是分开的，所以我想通过HTML-Object标签将它们包括进来.

我浏览web已经有一段时间了，但是我只是没有加入single中的单个元素来更改它们的属性或添加函数等等。

我的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()，但这也不起作用。

javascript

html

svg

回答 1

Stack Overflow用户

发布于 2016-05-18 07:52:43

似乎Chrome在没有(本地)服务器设置时加载对象时有问题。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37286600

复制

相似问题

问基于HTML对象标签的交互式SVG
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于HTML对象标签的交互式SVGEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于HTML对象标签的交互式SVG
EN