I have an SVG file containing 3 vector shapes:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ".1/DTD/svg11.dtd">
<svg version="1.1" xmlns="" xmlns:xlink="" x="0px" y="0px" width="800px" height="1500px" viewBox="0 0 1500 1500" enable-background="new 0 0 1500 1500" xml:space="preserve">
<svg:style xmlns:svg="" type="text/css">
g { display: none; }
g:target { display: block; }
</svg:style>
<g id="svgRed">
<rect x="301" y="344" fill="#DB1919" stroke="#000000" stroke-width="10" stroke-miterlimit="10" width="286" height="314"/>
</g>
<g id="svgGreen">
<circle fill="#1AD84B" cx="692.143" cy="1007.381" r="180.953"/>
</g>
<g id="svgBlue">
<path fill="#1A7ED8" d="M1271,1052c0,1.657-1.343,3-3,3h-251c-1.657,0-3-1.343-3-3V347c0-1.657,1.343-3,3-3h251 c1.657,0,3,1.343,3,3V1052z"/>
</g>
</svg>
As you see, I have each shape in a separate group. I've set all groups to display:none unless they are targeted. Now I can show the blue shape in an HTML document like so:
<object data="test.svg#svgBlue" type="image/svg+xml" width="600" height="860">
My question is, what if I want to show two of the shapes? I can't seem to target more than one shape in the HTML.
I'll be using javascript alongside this, so that is also acceptable to use.
I have an SVG file containing 3 vector shapes:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/1999/xlink" x="0px" y="0px" width="800px" height="1500px" viewBox="0 0 1500 1500" enable-background="new 0 0 1500 1500" xml:space="preserve">
<svg:style xmlns:svg="http://www.w3/2000/svg" type="text/css">
g { display: none; }
g:target { display: block; }
</svg:style>
<g id="svgRed">
<rect x="301" y="344" fill="#DB1919" stroke="#000000" stroke-width="10" stroke-miterlimit="10" width="286" height="314"/>
</g>
<g id="svgGreen">
<circle fill="#1AD84B" cx="692.143" cy="1007.381" r="180.953"/>
</g>
<g id="svgBlue">
<path fill="#1A7ED8" d="M1271,1052c0,1.657-1.343,3-3,3h-251c-1.657,0-3-1.343-3-3V347c0-1.657,1.343-3,3-3h251 c1.657,0,3,1.343,3,3V1052z"/>
</g>
</svg>
As you see, I have each shape in a separate group. I've set all groups to display:none unless they are targeted. Now I can show the blue shape in an HTML document like so:
<object data="test.svg#svgBlue" type="image/svg+xml" width="600" height="860">
My question is, what if I want to show two of the shapes? I can't seem to target more than one shape in the HTML.
I'll be using javascript alongside this, so that is also acceptable to use.
Share Improve this question asked Feb 20, 2014 at 19:28 CaribouCodeCaribouCode 14.4k33 gold badges111 silver badges186 bronze badges1 Answer
Reset to default 2Firstly, you must insert the SVG inline in your HTML5 Document. The object is not accessible via local javascript. Then it's possible to show/hide and change all elements via the DOM. You can load inline svg as xml using XMLHttpRequest and then have the response fill the innerHTML of a DIV.
Try the files below. Once it is loaded you can use the buttons to toggle display.
Assume you have an svg file(my.svg)
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/1999/xlink" viewBox="0 0 1500 1500">
<g id="svgRed" display="inline">
<rect x="301" y="344" fill="#DB1919" stroke="#000000" stroke-width="10" stroke-miterlimit="10" width="286" height="314"/>
</g>
<g id="svgGreen" display="inline">
<circle fill="#1AD84B" cx="692.143" cy="1007.381" r="180.953"/>
</g>
<g id="svgBlue" display="inline">
<path fill="#1A7ED8" d="M1271,1052c0,1.657-1.343,3-3,3h-251c-1.657,0-3-1.343-3-3V347c0-1.657,1.343-3,3-3h251 c1.657,0,3,1.343,3,3V1052z"/>
</g>
</svg>
And your HTML5 document is as below:
<!DOCTYPE html>
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<center>
<div id="svgInlineDiv" style='background-color:lightgreen;width:300px;height:300px;'></div>
<button onClick=toggleDisplay(svgRed)>toggle red</button>
<button onClick=toggleDisplay(svgBlue)>toggle blue</button>
<button onClick=toggleDisplay(svgGreen)>toggle green</button>
</center>
<script id=myScript>
function toggleDisplay(me)
{
if(me.getAttribute("display")=="inline")
me.setAttribute("display","none")
else
me.setAttribute("display","inline")
}
</script>
<script>
document.addEventListener("onload",inlineSVG(),false)
function inlineSVG()
{
var SVGFile="my.svg"
var loadXML = new XMLHttpRequest;
function handler(){
if(loadXML.readyState == 4 && loadXML.status == 200)
svgInlineDiv.innerHTML=loadXML.responseText
}
if (loadXML != null){
loadXML.open("GET", SVGFile, true);
loadXML.onreadystatechange = handler;
loadXML.send();
}
}
</script>
</body>
</html>