svg基础（三）分组、渐变

上一篇文章简单介绍了svg常用标签及其属性,本篇主要介绍分组，渐变

1 分组<g>

分组容器

• 添加到g元素上的变换会应用到其所有的子元素上
• 添加到g元素的属性会被其所有的子元素继承
• 定义复杂对象，可通过<use>元素引用

1.1 分组

<svg>
  <g>
    <line x1="20" y1="20" x2="80" y2="20" stroke="blue" />
    <rect x="20" y="30" height="40" width="60" stroke="blue" fill="red" />
    <text x="20" y="90" stroke="red" fill="red">svg基础</text>
  </g>
</svg>

1.2 继承属性

 <svg>
  <g stroke="blue">
    <line x1="20" y1="20" x2="80" y2="20" />
    <rect x="20" y="30" height="40" width="60" fill="red" />
    <text x="20" y="90" stroke="red" fill="red">svg基础</text>
  </g>
</svg>

1.3 应用变换

<svg>
  <g stroke="blue" transform="rotate(30,50,50)">
    <line x1="20" y1="20" x2="80" y2="20" />
    <rect x="20" y="30" height="40" width="60" fill="red" />
    <text x="20" y="90" stroke="red" fill="red">svg基础</text>
  </g>
</svg>

可以看到，<g>元素中的所有形状如何围绕点50,50旋转30度

可以看到line和rect继承了g的stroke，而text应用的是自身的stroke

<g>标签没有X和Y属性，意味着不能通过更改x和y属性来移动其中的元素。要移动<g>标签的内容，只能使用transform属性使用“ translate”函数

 <svg width="300" height="300">
  <g stroke="blue">
    <line x1="20" y1="20" x2="80" y2="20" />
    <rect x="20" y="30" height="40" width="60" fill="red" />
    <text x="20" y="90" stroke="red" fill="red">svg基础</text>
  </g>
  <g stroke="blue" transform="translate(100,100)">
    <line x1="20" y1="20" x2="80" y2="20" />
    <rect x="20" y="30" height="40" width="60" fill="red" />
    <text x="20" y="90" stroke="red" fill="red">svg基础</text>
  </g>
</svg>

2 渐变

渐变标签必须嵌套在<defs>标签内部

2.1 线型渐变<linearGradient>

线性渐变可以定义为水平，垂直或角渐变：

• 当y1和y2相等，而x1和x2不同时，可创建水平渐变
• 当x1和x2相等，而y1和y2不同时，可创建垂直渐变
• 当x1和x2不同，且y1和y2不同时，可创建角形渐变

<svg>
  <defs>
    <linearGradient id="lineGrad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="yellow" stop-opacity="1" />
      <stop offset="50%" stop-color="green" stop-opacity="1" />
      <stop offset="100%" stop-color="red" stop-opacity="1" />
    </linearGradient>
  </defs>
  <rect x="20" y="30" height="40" width="60" fill="url(#lineGrad1)" />
  <text x="20" y="90" fill="url(#lineGrad1)">svg基础</text>
</svg>

<svg>
  <defs>
    <linearGradient id="lineGrad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="yellow" stop-opacity="1" />
      <stop offset="50%" stop-color="green" stop-opacity="1" />
      <stop offset="100%" stop-color="red" stop-opacity="1" />
    </linearGradient>
  </defs>
  <rect x="20" y="30" height="40" width="60" fill="url(#lineGrad1)" />
  <text x="20" y="90" stroke="url(#lineGrad1)">svg基础</text>
</svg>

<svg>
  <defs>
    <linearGradient id="lineGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="yellow" stop-opacity="1" />
      <stop offset="50%" stop-color="green" stop-opacity="1" />
      <stop offset="100%" stop-color="red" stop-opacity="1" />
    </linearGradient>
  </defs>
  <rect x="20" y="30" height="40" width="60" fill="url(#lineGrad1)" />
  <text x="20" y="90" stroke="url(#lineGrad1)">svg基础</text>
</svg>

2.1 放射性渐变<radialGradient>

• CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆
• 渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束

<svg>
      <defs>
        <radialGradient
          id="radialGrad2"
          cx="50%"
          cy="50%"
          r="50%"
          fx="50%"
          fy="50%"
        >
          <stop offset="0%" stop-color="white" stop-opacity="0" />
          <stop offset="100%" stop-color="blue" stop-opacity="1" />
        </radialGradient>
      </defs>
      <rect x="20" y="30" height="40" width="60" fill="url(#radialGrad2)" />
      <text x="20" y="90" stroke="url(#radialGrad2)">svg基础</text>
    </svg>