Menu
I have a script in my application that hides g elements in an SVG that have specific ID values, but this only works if the g element has a visibility attribute. However, the SVGs I'm using do not have a visibility attribute on the g elements and I'm not in control of the source. Therefore, I need to find a way to dynymically add the visibility attribute when the parent HTML page is loaded.
I would like the script to create the visibility attribute on all g elements that are children of <g id="Callouts">. For instance, the final code would look something like this:
<g id="Callouts">
<g id="Callout1" visibility="visible">...</g>
<g id="Callout2" visibility="visible">...</g>
</g>
I've looked all over for examples where attributes are added to the SVG structure, but haven't been able to find anything yet. It also doesn't help that I'm a complete novice when it comes to JavaScript. Does anyone know how to do this?
UPDATE: I coupled Digital Plane's suggested code with the code I'm using to access the SVG document. The resulting function is below. This is supposed to show every g element under <g id="Callouts">. However, I keep getting an "object not supported" error on the for loop.
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');
}
}
}
}
Please forgive my ignorance about JavaScript, but what am I doing wrong here?
UPDATE: Here is an example of my HTML code.
<?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>
672
Once you have selected an element, you can get and set its attributes with getAttributeNS () and setAttributeNS (). For example, we can get an element's y coordinate and add 10 to it like so: This will work regardless how the SVG is added to the page or where the JS is.
How to create SVG graphics using JavaScript? All modern browsers support SVG and you can easily create it using JavaScript. Google Chrome and Firefox both support SVG. With JavaScript, create a blank SVG document object model (DOM). Using attributes, create a shape like a circle or a rectangle.
All of the following demos have an empty SVG element in the HTML. I’ve manually added it, but you can create and add it via JavaScript as well. I also used a background rectangle so we can see what we’re doing.
Whatever method you use, so long as you have got the svg element, you can use: Creating a text element that contains text is the same as it is in HTML: you have to create a separate text node using createTextNode (). You then append this to a text element.
You should be able to use setAttribute, with something like this:
element.setAttribute("visibility", "visible");
If you want all g elements that are children of <g id="Callouts">, do this on document load:
var element = document.getElementById("Callouts");
var elements = element.getElementsByTagName("g");
for(var i = 0; i < elements.length; i++)
elements[i].setAttribute("visibility", "visible");
No, you must use setAttributeNS(null, 'visibility', 'visible);
setAttribute might not work on/in svg on some browsers.
Or to be more blunt: setAttribute is DOM1 setAttributeNS is DOM2 Svg has name spaces, svg is xml so setAttributeNS is for you.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
