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><radialGradientid="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>