Svg元素

yuhuo2022-04-01HtmlHtml

SVG教程 - SVG | MDN (mozilla.org)open in new window

根元素

svg

属性	描述
version	版本
xmlns	命名空间
xmlns:xlink	命名空间
viewBox	视口，取值：横坐标纵坐标宽度值高度值
width	宽度
height	高度

<!-- svg文件需要xml标签，内嵌svg标签不用 -->
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg 
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 300 300" 
     width="300px"
     height="300px"
>
</svg>

<!-- img引用svg文件 -->
<img width="100" src="https://yuhuo520.gitee.io/practice/static/svg/firefox.svg">

<!-- object引用svg文件 -->
<object width="100" data="https://yuhuo520.gitee.io/practice/static/svg/firefox.svg"></object>

<!-- embed引用svg文件 -->
<embed width="100" src="https://yuhuo520.gitee.io/practice/static/svg/firefox.svg" />

<!-- background引用svg文件 -->
<div style="display:inline-block;width:100px;height:100px;background:url(https://yuhuo520.gitee.io/practice/static/svg/firefox.svg) center/100%;"></div>

形状元素

公共属性	描述
display	显示
visibility	可见性
opacity	透明度
transform	变换
transform-origin	变换原点
filter	滤镜
clip-path	裁剪
fill	填充色
fill-opacity	填充透明度
fill-rule	填充规则
stroke	描边色
stroke-opacity	描边透明度
stroke-width	描边宽度
stroke-dasharray	描边虚线间隔
stroke-dashoffset	描边虚线偏移
stroke-linecap	描边末端形状
stroke-linejoin	描边转角形状

rect

属性	描述
x	左上角顶点横坐标
y	左上角顶点纵坐标
rx	圆角水平半径
ry	圆角垂直半径
width	宽度值
height	高度值

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 200 200" style="outline: 1px solid;">
    <rect x="50" y="50" rx="10" ry="10" width="100" height="100" fill="orange" />
</svg>

circle

属性	描述
cx	圆心横坐标
cy	圆心纵坐标
r	半径

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 200 200" style="outline: 1px solid;">
    <circle cx="100" cy="100" r="50" fill='orange'/>
</svg>

ellipse

属性	描述
cx	圆心横坐标
cy	圆心纵坐标
rx	横向半径
ry	纵向半径

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 200 200" style="outline: 1px solid;">
    <ellipse cx="100" cy="100" rx="80" ry="50" fill='orange'/>
</svg>

line

属性	描述
x1	起点横坐标
y1	起点纵坐标
x2	终点横坐标
y2	终点纵坐标

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 200 200" style="outline: 1px solid;">
    <line x1="50" y1="50" x2="150" y2="150" stroke="orange" stroke-width="10" stroke-linecap="round"/>
</svg>

polygon

属性	描述
points	顶点坐标集合，取值：x1,y1 x2,y2 x3,y3...

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 200 200" style="outline: 1px solid;">
    <polygon points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill='orange'/>
</svg>

polyline

属性	描述
points	顶点坐标集合，取值：x1,y1 x2,y2 x3,y3...

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 200 200" style="outline: 1px solid;">
    <polyline points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" stroke="orange" fill="none"/>
</svg>

path

属性	描述
d	路径命令集合

路径命令

参数说明

x y 表示绝对定位，即目标点 (x, y)。

dx dy 表示相对定位，假设当前点 (cx, cy)，则目标点 (cx + dx, cy + dy)。

x1 y1 表示贝塞尔曲线起点的控制点。

x2 y2 表示贝塞尔曲线终点的控制点。

M x y / m dx dy：将画笔移动到目标点上
L x y / l dx dy：在当前点和目标点画一条直线
H x / h dx：在当前点和目标点画一条水平线
V y / v dy：在当前点和目标点画一条垂直线
Z / z：在当前点和起始点画一条直线，形成闭合路径
C x1 y1, x2 y2, x y / c dx1 dy1, dx2 dy2, dx dy：三次贝塞尔曲线，参数：起点控制点，终点控制点，终点
S x2 y2, x y / s dx2 dy2, dx dy：续接三次贝塞尔曲线，参数：终点控制点，终点
Q x1 y1, x y / q dx1 dy1, dx dy：二次贝塞尔曲线，参数：控制点，终点
T x y / t dx dy：续接二次贝塞尔曲线，参数：终点

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 200 200" style="outline: 1px solid;">
    <path d="M 100 20 Q 20 60, 100 100 T 100 180" fill="transparent" stroke="orange"></path>
</svg>

text

属性	描述
x	锚点横坐标
y	锚点纵坐标
dx	水平偏移距离
dy	垂直偏移距离
text-anchor	锚点位置 start：左下角 middle：中下点 end：右下角
rotate	每个字符旋转角度
font-family	字族
font-size	字号
font-weight	字重
font-style	字形
font-variant	字体变体
font-stretch	字宽
font-kerning	是否使用字体中的字距信息
text-decoration	文本装饰
letter-spacing	字符间距
word-spacing	单词间距

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 200 200" style="outline: 1px solid;">
    <path id="my_path" d="M 20,20 C 40,40 80,40 100,20" fill="transparent" />
    <text>
        <textPath xlink:href="#my_path">
            This text follows a curve.
        </textPath>
    </text>
    <text id="text" x="100" y="100" text-anchor="middle" font-size="20">
        Hello <tspan fill="red">World!</tspan>
    </text>
</svg>

定义元素

defs

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 200 200" style="outline: 1px solid;">
    <defs>
        <!-- 定义文档样式 -->
        <style type="text/css">
            .my_rect1 {
                fill: orange;
                transition: 1s;
                transform-origin: center;
            }
            .my_rect:hover {
                fill: red;
                transform: rotate(90deg);
            }
        </style>
    </defs>
    <rect class="my_rect1" x="50" y="50" rx="10" ry="10" width="100" height="100" />
</svg>

stop

属性	描述
offset	结点位置，取值：百分数
stop-color	结点色
stop-opacity	结点透明度

linearGradient

属性	描述
id	id 值
x1	起点横坐标
y1	起点纵坐标
x2	终点横坐标
y2	终点纵坐标
xlink:href	引用另一个线性渐变的 id 值（#id）
spreadMethod	剩余空间填充方式 pad：边缘颜色填充（默认） reflect：反向渐变填充 repeat：重复渐变填充
gradientUnits	单位 objectBoundingBox：图形元素坐标，百分值或倍数值，横坐标或水平半径相对于图形宽度，纵坐标或垂直半径相对于图形高度（默认） userSpaceOnUse：svg元素坐标，绝对长度值

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 200 200" style="outline: 1px solid">
    <defs>
        <style type="text/css">
            .my_rect2 {
                fill: url(#linearGradient1);
                stroke: url(#linearGradient2);
                stroke-width: 10px;
            }
            .stop1, .stop3 {
                stop-color: red;
                stop-opacity: 0.8;
            }
        </style>
        <linearGradient id="linearGradient1">
            <stop offset="0%" class="stop1" />
            <stop offset="50%" stop-color="blue" stop-opacity="0.8" />
            <stop offset="100%" class="stop3" />
        </linearGradient>
        <linearGradient id="linearGradient2" x1="0" y1="0" x2="1" y2="1" xlink:href="#linearGradient1"></linearGradient>
    </defs>
    <rect class="my_rect2" x="50" y="50" width="100" height="100"/>
</svg>

radialGradient

属性	描述
id	id 值
cx	圆心横坐标
cy	圆心纵坐标
fx	焦点横坐标
ry	焦点横坐标
r	半径
xlink:href	引用另一个径向渐变的 id 值（#id）
spreadMethod	剩余空间填充方式 pad：边缘颜色填充（默认） reflect：反向渐变填充 repeat：重复渐变填充
gradientUnits	单位 objectBoundingBox：图形元素坐标，百分值或倍数值，横坐标或水平半径相对于图形宽度，纵坐标或垂直半径相对于图形高度（默认） userSpaceOnUse：svg元素坐标，绝对长度值

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 200 200" style="outline: 1px solid">
    <defs>
        <radialGradient id="radialGradient1">
            <stop offset="0%" stop-color="red"/>
            <stop offset="100%" stop-color="blue"/>
        </radialGradient>
        <radialGradient id="radialGradient2" cx="0.5" cy="0.5" fx="0.25" fy="0.25" r="0.5" xlink:href="#radialGradient1"></radialGradient>
    </defs>
    <rect x="10" y="20" width="80" height="160" fill="url(#radialGradient1)"/>
    <rect x="110" y="60" width="80" height="80" fill="url(#radialGradient2)"/>
</svg>

pattern

属性	描述
id	id 值
width	宽度
height	高度
x	起点横坐标
y	起点纵坐标
xlink:href	引用另一个径向渐变的 id 值（#id）
patternUnits	图案单位 objectBoundingBox：图形元素坐标，百分值或倍数值，横坐标和图案宽度相对于图形宽度，纵坐标和图案高度相对于图形高度（默认） userSpaceOnUse：svg元素坐标，绝对长度值
patternContentUnits	图案内容单位 objectBoundingBox：图案元素坐标，百分值或倍数值，横坐标和图案宽度相对于图形宽度，纵坐标和图案高度相对于图形高度 userSpaceOnUse：svg元素坐标，绝对长度值（默认）

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="240" viewBox="0 0 240 260" style="outline: 1px solid;">
    <defs>
        <style>
            .my_rect3 {
                transition: 1s;
            }
            .my_rect3:hover {
                width: 200px;
            }
        </style>
        <pattern 
                 id="pattern1" 
                 x="0" 
                 y="0" 
                 width="0.25" 
                 height="0.25" 
                 patternUnits="objectBoundingBox"
                 patternContentUnits="objectBoundingBox"
                 >
            <rect x="0" y="0" width="0.1" height="0.1" fill="skyblue"/>
            <circle cx="0.125" cy="0.125" r="0.1" fill="orange"/>
        </pattern>
        <pattern 
                 id="pattern2" 
                 x="0" 
                 y="0" 
                 width="50" 
                 height="50" 
                 patternUnits="userSpaceOnUse"
                 patternContentUnits="userSpaceOnUse"
                 >
            <rect x="0" y="0" width="20" height="20" fill="skyblue"/>
            <circle cx="25" cy="25" r="20" fill="orange"/>
        </pattern>
    </defs>
    <rect class="my_rect3" x="20" y="20" width="100" height="100" fill="url(#pattern1)"/>
    <rect class="my_rect3" x="20" y="140" width="100" height="100" fill="url(#pattern2)"/>
</svg>

clipPath

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 200 200" style="outline: 1px solid;">
    <defs>
        <clipPath id="clipPath">
            <rect x="0" y="0" width="200" height="100" />
        </clipPath>
    </defs>
    <circle cx="100" cy="100" r="50" fill='orange' clip-path="url(#clipPath)"/>
</svg>

filter

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 200 200" style="outline: 1px solid;">
    <defs>
        <filter id="filter">
            <!-- 复杂的滤镜定义，看不懂 -->
        </filter>
    </defs>
    <circle cx="100" cy="100" r="50" fill='orange' filter="url(#filter)"/>
</svg>

mask

遮罩 TODO

剪切和遮罩 - SVG | MDN (mozilla.org)open in new window

分组元素

g

形状元素分组，以便定义相同的属性。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 200 200" style="outline: 1px solid;">
    <g fill="none" stroke="orange" font-size="50" transform-origin="center" transform="rotate(90)">
        <polyline points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40"/>
        <path d="M 150 20 Q 70 60, 150 100 T 150 180"></path>
        <text id="text" x="100" y="150" text-anchor="middle">
            Text
        </text>
    </g>
</svg>

嵌入元素

use

属性包括被引用元素自身的属性。

属性	描述
xlink:href	被引用的元素的 id 值（#id）

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 200 200" style="outline: 1px solid;">
    <defs>
        <line id="my_line" x1="50" y1="50" x2="150" y2="150" stroke="orange" stroke-width="10" stroke-linecap="round"/>
    </defs>
    <use xlink:href="#my_line" />
    <use xlink:href="#my_line" transform="translate(30)"/>
</svg>

image

属性	描述
display	显示
visibility	可见性
opacity	透明度
transform	变换
transform-origin	变换原点
filter	滤镜
clip-path
x	左上角顶点横坐标
y	左上角顶点纵坐标
width	宽度值
height	高度值
xlink:href	图片路径

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 200 200" style="outline: 1px solid;">
    <image 
           x="50" 
           y="50" 
           width="100" 
           height="100"
           xlink:href="https://yuhuo520.gitee.io/practice/static/img/avatar.jpg"/>
</svg>

Svg元素

# 根元素

# svg

# 形状元素

# rect

# circle

# ellipse

# line

# polygon

# polyline

# path

# text

# 定义元素

# defs

# stop

# linearGradient

# radialGradient

# pattern

# clipPath

# filter

# mask

# 分组元素

# g

# 嵌入元素

# use

# image

ON THIS PAGE

根元素

svg

形状元素

rect

circle

ellipse

line

polygon

polyline

path

text

定义元素

defs

stop

linearGradient

radialGradient

pattern

clipPath

filter

mask

分组元素

g

嵌入元素

use

image