初识SVG(四)
程序员文章站
2024-01-28 16:06:16
...
3.1.线性渐变
- <linearGradient>和<stop>
- <linearGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。线性渐变可以定义为水平，垂直或角渐变。
- 当y1和y2相等，而x1和x2不同时，可创建水平渐变
- 当x1和x2相等，而y1和y2不同时，可创建垂直渐变
- 当x1和x2不同，且y1和y2不同时，可创建角形渐变
- <linearGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。线性渐变可以定义为水平，垂直或角渐变。
- 定义方向
- 关键点位置和颜色
- 关键点由stop标签定义，其中offset一般为小于1的参数，用来定义当前渐变的开始位置，计算方向延渐变方向(也就是在 <linearGradient>中定义的方向)
- gradientUnits
- gradientUnits="‘userSpaceOnUse’ or ‘objectBoundingBox’。使用视图框或对象，以确定相对位置矢量点。 （默认为’objectBoundingBox）"
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 600" width="250" height="700" preserveAspectRatio="xMinYMin meet">
<!--defs用来定义某些元素，但不在实际世界中展示，使用进行引用即可-->
<defs>
<!--x1,y1,x2,y2用来定义渐变的起始位置-->
<linearGradient id="grad1" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#1497FC"></stop>
<stop offset="0.5" stop-color="#A469BE"></stop>
<stop offset="1" stop-color="#FF8C00"></stop>
</linearGradient>
</defs>
<!--url(#grad1)用来引用defs标签-->
<rect x="100" y="100" fill="url(#grad1)" width="200" height="150"></rect>
</svg>
</body>
</html>
效果：
3.2.径向渐变(与线性渐变类似)
- <radialGradient>和<stop>
- cx，cy和r属性定义渐变的圆心坐标和半径尺寸
- fx与fy属性用来规定渐变焦点坐标焦点，通俗的说就是渐变的起点位置，此位置处颜色值保持最初状态(一般来说fx与fy会定义在渐变圆内，超出的话不同浏览器会有不同处理)
- 定义方向
- 关键点位置和颜色
- gradientUnits
- 焦点位置
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="250" height="700" preserveAspectRatio="xMinYMin meet">
<!--defs用来定义某些元素，但不在实际世界中展示，使用进行引用即可-->
<defs>
<radialGradient id="grad1" cx="0.5" cy="0.5" r="0.45" fx="0.4" fy="0.3">
<stop offset="0" stop-color="#1497FC"></stop>
<stop offset="0.5" stop-color="#A469BE"></stop>
<stop offset="1" stop-color="#FF8C00"></stop>
</radialGradient>
</defs>
<rect x="100" y="100" fill="url(#grad1)" width="200" height="200"></rect>
</svg>
</body>
</html>
效果：
当我们把焦点位置定义在渐变圆外时(更改这一行为<radialGradient id=“grad1” cx=“0.5” cy=“0.5” r=“0.2” fx=“0.9” fy=“0.6”>):
3.3.笔刷
- 绘制纹理
- <pattern>标签
- patternUnits和patternContentUnits
- 上面两个属性都有以下两种取值，而patternUnits默认为userSpaceOnUse，patternContentUnits默认为objectBoundingBox
- userSpaceOnUse: 使用百分比配置
- objectBoundingBox: 使用宽高值配置
我们来看看不加patternUnits和patternContentUnits的效果。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>笔刷测试</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 600" width="800" height="500" preserveAspectRatio="xMinYMin meet">
<defs>
<pattern id="p1" x="0" y="0" width="0.2" height="0.2">
<circle r="5" cx="10" cy="10" fill="red"></circle>
<polygon points="30 10 60 50 0 50" fill="green"></polygon>
</pattern>
</defs>
<rect x="100" y="100" width="500" height="300" fill="url(#p1)" stroke="blue"></rect>
</svg>
</body>
</html>
效果图：