我的应用程序中有一个脚本,它隐藏了具有特定ID值的SVG中的g元素,但这只适用于g元素具有visibility属性的情况.但是,我正在使用的SVG在g元素上没有可见性属性,而且我无法控制源.因此,我需要找到一种方法来在加载父HTML页面时动态添加visibility属性.
我希望脚本在所有g子元素上创建visibility属性<g id="Callouts">.例如,最终代码看起来像这样:
<g id="Callouts">
<g id="Callout1" visibility="visible">...</g>
<g id="Callout2" visibility="visible">...</g>
</g>
我已经查看了将属性添加到SVG结构但尚未找到任何内容的示例.在JavaScript方面,我也是一个完全新手也没有帮助.有谁知道如何做到这一点？
更新:我将Digital Plane建议的代码与我用来访问SVG文档的代码相结合.结果函数如下.这应该显示每个g元素<g id="Callouts">.但是,我在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>
你应该可以使用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");