CSS Master

var svg, originalViewBox, max20em, mq, updateViewBox;

svg = document.querySelector('svg');

/* Store the original value in a variable */

originalViewBox = svg.getAttribute('viewBox');

/* Define our media query and media query object */

mq = matchMedia("(max-width: 20em)");

/* Define the handler */

updateViewBox = function(){

if (mq.matches) {

/* Change the viewBox dimensions to show the hexagon */

svg.setAttribute('viewBox', "0 0 200 174");

} else {

svg.setAttribute('viewBox', originalViewBox);

}

}

/* Fire on document load */

// WebKit/Blink browsers

svg.onload = updateViewBox;

// Firefox & IE

svg.addEventListener('SVGLoad', updateViewBox, true);

/* Fire if the media condition changes */

mq.addListener(updateViewBox);

]]>

</script>

</defs>

More on Interactive SVG Documents

ForafullerprimeroncreatinginteractiveSVGdocuments,readthe“Dynamic

SVGandJavaScript”^15 chapterofAnSVGPrimerforToday'sBrowsersfromthe

W3C.

Now,whenevertheSVGcontaineris20emorless,thevalueofviewBoxwillbe"0

0200 174".Whenitexceeds20em,viewBoxwillberestoredtoitsinitialvalueas

representedinFigure8.11.

(^15) http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#JavaScript
324 CSS Master