css 如何为Web创建包含图层的SVG。

Posted 2021-05-13

SVG Stacking
===============

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

<?xml version="1.0" encoding="utf-8"?>
<!-- 
 Generator: Adobe Illustrator 15.1.0, 
 SVG Export Plug-In . SVG Version: 6.00 Build 0) 
-->
<!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="60px" 
 height="60px" 
 viewBox="0 0 60 60" 
 xml:space="preserve">
 <g id="first">
  <path [...] />
 </g>
 <g id="second">
  <path [...] />
 </g>
 <g id="third">
  <path [...] />
 </g>
</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>

<?xml version="1.0"?>
<svg 
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg:style 
    xmlns:svg="http://www.w3.org/2000/svg" type="text/css">
      .i { display: none; fill: #010101; }
      .i:target { display: block; }
  </svg:style>
 <svg:svg 
  xmlns:svg="http://www.w3.org/2000/svg" 
  class="i" 
  id="first" 
  width="60px" 
  height="60px" 
  viewBox="0 0 60 60">
   <path [...] />
 </svg:svg>
 <svg:svg 
  xmlns:svg="http://www.w3.org/2000/svg" 
  class="i" 
  id="second" 
  width="60px" 
  height="60px" 
  viewBox="0 0 60 60">
   <path [...] />
 </svg:svg>
 <svg:svg 
  xmlns:svg="http://www.w3.org/2000/svg" 
  class="i" 
  id="third" 
  width="60px" 
  height="60px" 
  viewBox="0 0 60 60">
   <path [...] />
 </svg:svg>
</svg>

<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; 
}