如何使用JavaScript在SVG中创建属性？
如何使用JavaScript在SVG中创建属性？
提问于 2011-09-01 16:39:47
我在我的应用程序中有一个脚本，它将g元素隐藏在具有特定ID值的SVG中，但只有当g元素具有可见性属性时才能工作。但是，我使用的SVG在g元素上没有可见性属性，我也没有控制源代码。因此，在加载父HTML页面时，我需要找到一种动态添加可见性属性的方法。
我希望脚本在所有属于<g id="Callouts">子元素的g元素上创建可见性属性。例如，最终代码如下所示：
<g id="Callouts">
<g id="Callout1" visibility="visible">...</g>
<g id="Callout2" visibility="visible">...</g>
</g>我一直在寻找将属性添加到SVG结构中的示例，但是还没有找到任何东西。当涉及到JavaScript时，我还是一个完全的新手也于事无补。有人知道怎么做吗？
更新：I将数字平面的建议代码与我用来访问SVG文档的代码耦合起来。产生的函数如下。这应该显示<g id="Callouts">下的每个g元素。但是，我一直在for循环中得到一个“对象不受支持”错误。
function displayOnload (svgName) {
var svgEmbed = document.embeds[svgName];
if (typeof svgEmbed.getSVGDocument != 'undefined') {
var svgDocument = svgEmbed.getSVGDocument();
var parentElement = svgDocument.getElementById('Callouts');
if (parentElement != null) {
var childElements = parentElement.getElementsByTagname('g');
for (var i=0; i < childElements.length; i++) {
childElements[i].setAttribute('visibility', 'visible');
}
}
}
}请原谅我对JavaScript的无知，但我在这里做错了什么？
更新:这里是我的HTML代码的一个例子。
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:svg="http://www.w3.org/2000/svg">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Drop Bar assembly (2328775)</title>
<link rel="stylesheet" type="text/css" href="Content.css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
function displayOnload (svgName) {
var svgEmbed = document.embeds[svgName];
if (typeof svgEmbed.getSVGDocument != 'undefined') {
var svgDocument = svgEmbed.getSVGDocument();
var parentElement = svgDocument.getElementById('Callouts');
var childElements = parentElement.getElementsByTagName('g');
for (var i=0; i < childElements.length; i++) {
childElements[i].setAttribute('visibility', 'hidden');
}
}
}
</script>
</head>
<body onload="displayOnload('SVG')">
...
</body>
</html>回答 2
Stack Overflow用户
发布于 2011-09-01 16:51:53
您应该能够使用setAttribute，如下所示：
element.setAttribute("visibility", "visible");如果您希望所有g元素都是<g id="Callouts">的子元素，那么在加载文档时这样做：
var element = document.getElementById("Callouts");
var elements = element.getElementsByTagName("g");
for(var i = 0; i < elements.length; i++)
elements[i].setAttribute("visibility", "visible");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7273500
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号