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/
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; | |
} |
Hello -
This looks like it might be what I need for my project, but the demo links are broken. Any chance on an update?
Thanks!