Skip to content

Instantly share code, notes, and snippets.

@hofmannsven
Last active November 18, 2020 12:11
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save hofmannsven/6227428 to your computer and use it in GitHub Desktop.
Save hofmannsven/6227428 to your computer and use it in GitHub Desktop.
How to create SVGs with layers for the web.
(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
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<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>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<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;
}
@bouncinglime
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment