SVG分组和引用对象

1.<g>元素

• <g>元素会将所有子元素作为一个组合，通常还有一个唯一的id作为名称;
• 每个组合还可以拥有自己的<title>和<desc>来供基于文本的xml应用程序识别或者为视障用户提供更好的可访问性;
• 阅读器会读取<title>和<desc>元素的内容。鼠标悬停或者轻触组合内的图形时，会显示<title>元素内容的提示框。
• <g>元素可以组合元素并可以提供一些注释，组合还可以比较嵌套;

<!-- g#hose嵌套了g#man和g#woman -->
 <g id="house" style="fill:none;stroke:black;" width="200" height="200">
      <title>house</title>
      <desc>House width door</desc>
      <rect x="6" y="50" width="60" height="60"></rect>
      <polyline points="6 50,36 9,66 50"></polyline>
      <polyline points="35 110,36 80,50 80,50 110" />
      <g id="man" style="fill:none;stroke:black;">
          <title>man</title>
          <desc>Male human</desc>
          <circle cx="85" cy="56" r="10" />
          <line x1="85" y1="66" x2="85" y2="80" />
          <polyline points="76 104,85 80,94 104" />
          <polyline points="76 70,85 76,94 70" />
      </g>
      <g id="woman" style="fill:none;stroke:black;">
          <title>woman</title>
          <desc>Female human</desc>
          <circle cx="110" cy="56" r="10" />
          <polyline points="110 66,110 80,100 90,120 90,110 80" />
          <line x1="104" y1="104" x2="108" y2="90" />
          <line x1="112" y1="90" x2="116" y2="104" />
          <polyline points="101 70,110 76,119 80" />
      </g>
 </g>  

• 在起始<g>标签中指定的所有样式会应用于组合内所有子元素。

 <!-- 样式fill:none;stroke:black会作用于所有子元素 -->
 <g id="man" style="fill:none;stroke:black;">
          <title>man</title>
          <desc>Male human</desc>
          <circle cx="85" cy="56" r="10" />
          <line x1="85" y1="66" x2="85" y2="80" />
          <polyline points="76 104,85 80,94 104" />
          <polyline points="76 70,85 76,94 70" />
 </g>

2.<use>元素

• 复杂的图形中经常会出现重复元素，svg使用<use>元素为定义在<g>元素内的组合或者任意独立图形元素提供了类似复杂黏贴的能力;
• 定义了一组<g>图形对象后，使用<use>标签再次显示它们。要指定想要的重用的组合就给xlink:href属性指定URI即可，同时还要指定x和y的位置以表示组合应该移动到的位置。
• <use>元素并不限制只使用在同一个文件内的对象，还可以指定任意有效的文件或者URI.

eg:test.svg文件中定义了g组合
在其他文件中引用(文件名#ID名词)：
<use xlink:href="test.svg#house" x="10" y="20" />

3.<defs>元素

• SVG规范推荐我们将所有想要复用的对象放置在元素内，这样SVG阅读器进入流式环境中就能更轻松地处理数据。
• 由于组合在<defs>元素内，它们不会立刻绘制到屏幕上，而是作为"模板"供其他地方使用。

<defs>
      <!-- 在起始<g>标签中指定的所有样式会应用于 组合内的所有子元素。 -->
      <g id="house" style="stroke:black;">
        <desc>House width door</desc>
        <rect x="0" y="41" width="60" height="60"></rect>
        <polyline points="0 41,30 0,60 41"></polyline>
        <polyline points="30 101,30 71,44 71,44 101" />
      </g>
      <g id="man" style="fill:none;stroke:black;">
        <desc>Male human</desc>
        <circle cx="10" cy="10" r="10" />
        <line x1="10" y1="20" x2="10" y2="44" />
        <polyline points="1 58,10 44,19 58" />
        <polyline points="1 24,10 30,19 24" />
      </g>
      <g id="woman" style="fill:none;stroke:black;">
        <desc>Female human</desc>
        <circle cx="10" cy="10" r="10" />
        <polyline points="10 20,10 34,0 44,20 44,10 34" />
        <line x1="4" y1="58" x2="8" y2="44" />
        <line x1="12" y1="44" x2="16" y2="58" />
        <polyline points="1 24,10 30,19 24" />
      </g>
      <g id="couple">
        <desc>Male and female stick figures</desc>
        <use xlink:href="#man" x="0" y="0"></use>
        <use xlink:href="#woman" x="25" y="0"></use>
      </g>
</defs>
  
    <use xlink:href="#house" x="0" y="0" style="fill:#cfc;"></use>
    <use xlink:href="#couple" x="70" y="40"></use>
    <use xlink:href="#house" x="120" y="0" style="fill:#99f;"></use>
    <use xlink:href="#couple" x="190" y="40"></use> 

4.<symbol>元素

• <symbol>元素和<g>元素不同，<symbol>元素不会显示，因此无需把它放在规范内。
• <symbol>元素可以指定viewBox和preserveAspectRatio属性，通过给`````元素添加width和height属性就可以让symbol适配视口大小。

    <defs>
      <g id="octagon" style="stroke:black;">
        <desc>Octagon as grounp</desc>
        <polygon points="36 25,25 36,11 36,0 25,0 11,11 0,25 0,36 11" />
      </g>
      <symbol id="sym-octagon" style="stroke:black;" preserveAspectRatio="xMinYMid slice" viewBox="0 0  40 40">
        <desc>Octagon as symbol</desc>
        <polygon points="36 25,25 36,11 36,0 25,0 11,11 0,25 0,36 11" />
      </symbol>
    </defs>
    
     <use xlink:href="#octagon" x="80" y="40" width="40" height="60"
     style="fill:#c00;"></use>
 
     <use xlink:href="#sym-octagon" x="40" y="110" width="30" height="30" style="fill:#cfc;"></use>

5.<image>元素

• <use>元素允许我们重复SVG文件的一部分;
• <image>元素可以包含一个完整的SVG或者栅格文件;
• SVG规范要求阅读器支持JPEG和PNG两种栅格文件,阅读器还可能支持其他文件，比如GIF.

   <image xlink:href="../img/基本形状的总结.png"
     x="72" y="92" widt="160" height="120"
      preserveAspectRatio="defer xMidYMid meet"/>