SVG相关-常见框架元素

SVG元素

<svg>元素定义了一个矩形区域供客户端的SVG解析器渲染。一份SVG文档中可以包含多个<svg>标签，之间可以相互嵌套。

常用属性：

• xmlns：指明xml的命名空间
• x：左上角X坐标，默认0
• y：左上角Y坐标，默认0
• width：区域宽度，默认100%
• height：区域高度，默认100%

<g>元素

<g>元素是一种容器元素，可以把相关图形元素整合起来。需要赋予一个唯一的ID，可以在其他地方统一调用。支持多重嵌套。

某辆汽车实例：

<g id="car">
  	<g id="body">
  		<rect x="372" y="112" width="206" height="60" transform="matrix(1,0,0,0,0.5,-0.8,43)"/>
  		<rect x="440" y="72" width="84" height="42" transform="matrix(2.5,0,0,0,0.5,-445.7,18)" fill="#fff" stroke="#000"/>
  	</g>
  	  <g id="wheel" fill="#fff" stroke="#000">
  		<circle cx="150" cy="180" r="17" transform="matrix(1,0,0,1,280,0)"/>
  		<circle cx="150" cy="180" r="17" transform="matrix(1,0,0,1,368,0)"/>
  	</g>
  </g>

<defs>元素

SVG规范，最好把需要被引用的元素都定义在<defs>元素中，在解析时不会渲染这些引用元素，只会在需要时才渲染。

和<g>元素类似，<g>中的元素被解析后马上渲染显示，而<defs>不会。所以重复的元素都可以放到<defs>中，提高渲染效率。

<defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>
  <rect x="1cm" y="1cm" width="6cm" height="1cm" 
        fill="url(#Gradient01)"  />

<use>元素

它可以引用SVG中的可视化元素，本质是解析的时候把引用的元素克隆岛<use>元素所在的地方，被引用的元素不会继承<use>元素本身和其父元素的属性

<defs>
    <rect id="MyRect" x="0" y="0" width="60" height="10"/>
  </defs>
  <use xlink:href="#MyRect"
       transform="translate(20,2.5) rotate(10)" />

<symbol>元素

symbol元素用于定义图形模板，这个模板可以被use元素实例化。模板的功能与g元素很相似，都是提供一组图形对象，但是也有一些区别。symbol元素本身是不会被渲染的，只有symbol模板的实例会被渲染。symbol元素可以拥有属性viewBox和preserveAspectRatio，这些允许symbol缩放图形元素。所以没有<use>元素，<symbol>也就没有意义了