CODEWITHSUNDEEP
javascripthtmlcssxmlsvg
CaribouCode
CaribouCode

Reputation: 14398

Show multiple SVG layers from HTML document

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.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/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.org/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.

Upvotes: 0

Views: 11550

Answers (1)

Francis Hemsher
Francis Hemsher

Reputation: 3488

Firstly, 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.org/2000/svg" xmlns:xlink="http://www.w3.org/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.org/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>

Upvotes: 2

Related Questions