How to create SVGs with layers for the web.
Full tutorial: http://hofmannsven.com/2013/laboratory/svg-stacking/
Demo (with a div): http://hofmannsven.com/demo/svg-stacking/
Demo (with a background image): http://hofmannsven.com/demo/svg-stacks/background/
(function($) {
$(document).ready(function() {
// Fixing the WebKit Issues
$('div a').fixSVGStackBackground();
$('img').fixSVGStack();
});
if (Modernizr.svg) {
// Finally we are using the SVG Image via the hash
// but only if the browser can handle it...
$('#svg a').html('<img src="img/stacked-demo-stack.svg#layer" width="60" height="60" alt="SVG Stacked Image" />');
} else {
// ...and proving a PNG Image for older browsers!
$('#svg a').html('<img src="img/fallback-demo-stack.png" width="60" height="60" alt="Fallback for the SVG Stacked Image" />');
}
})(jQuery);<div id="svg">
<a href="http://hofmannsven.com">
<!-- Fallback if JavaScript is disabled -->
<img
src="img/fallback-demo-stack.png"
width="60"
height="60"
alt="Fallback for the SVG Stacked Image"
/>
</a>
</div>xsltproc --novalid Desktop/stack.xslt Desktop/demo-stack.svg > Desktop/stacked-demo-stack.svg<img
src="img/stacked-demo-stack.svg#layer"
width="60"
height="60"
alt="SVG Stacked Image"
/><!-- Loading jQuery -->
<script src="js/jquery.js"></script>
<!-- Loading SVG Stack Fix for WebKit Browsers -->
<script src="js/fixsvgstack.js"></script>
<!-- Loading Modernizr (only the SVG Browser Support) -->
<script src="js/modernizr.svg.js"></script><xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:svg="http://www.w3.org/2000/svg">
<xsl:template match="/svg:svg">
<xsl:copy>
<svg:style type="text/css">
<![CDATA[
.i {display:none;}
.i:target {display:block;}
]]>
</svg:style>
<xsl:apply-templates />
</xsl:copy>
</xsl:template>
<xsl:template match="/svg:svg/svg:g">
<svg:svg class="i">
<xsl:attribute name="id"><xsl:value-of select="@id" /></xsl:attribute>
<xsl:copy-of select="/svg:svg/@width" />
<xsl:copy-of select="/svg:svg/@height" />
<xsl:copy-of select="/svg:svg/@viewBox" />
<xsl:apply-templates select="@*|node()"/>
</svg:svg>
</xsl:template>
<xsl:template match="comment()" />
<xsl:template match="@*|node()">
<xsl:copy>
<xsl:apply-templates select="@*|*" />
</xsl:copy>
</xsl:template>
</xsl:stylesheet>.i {
display: none;
}
.i:target {
display: block;
}