我的应用程序中有一个脚本,它隐藏了具有特定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" …