初识SVG(四)

最新推荐文章于 2021-12-12 20:58:20 发布

陈迹·清欢

最新推荐文章于 2021-12-12 20:58:20 发布

阅读量162

点赞数 1

分类专栏： # SVG

本文链接：https://blog.csdn.net/qq_36360463/article/details/104531725

版权

SVG 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

3.1.线性渐变

<linearGradient>和<stop>
- <linearGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。线性渐变可以定义为水平，垂直或角渐变。
  - 当y1和y2相等，而x1和x2不同时，可创建水平渐变
  - 当x1和x2相等，而y1和y2不同时，可创建垂直渐变
  - 当x1和x2不同，且y1和y2不同时，可创建角形渐变
定义方向
关键点位置和颜色
- 关键点由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>