<link> 直线
x1=“0” y1=“0” 开始点的位置
x2=“100” y2=“100” 结束点的位置
<svg>
<line x1="0" y1="0" x2="100" y2="100" stroke="pink" stroke-width="10"></line>
</svg>
<polyline> 折线
points 设置多个点
<style>
.polyline {
stroke: red;
stroke-width: 10;
fill: none;
}
</style>
<svg>
<polyline points="50,50 50,100 100,100" class="polyline"></polyline>
</svg>
<circle>圆
cx:x轴位置
cy:y轴位置
r:圆的半径
<svg>
<circle cx="50" cy="50" r="50" />
</svg>
<ellipse>椭圆
cx:x轴位置
cy:y轴位置
xr:x轴圆的半径
ry:y轴圆的半径
<svg>
<ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>
<rect>矩形
x:x轴的位置
y:y轴的位置
width:宽度
height:高度
rx:x轴的半径
yx:y轴的半径
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
<!-- Simple rectangle -->
<rect width="100" height="100" />
<!-- Rounded corner rectangle -->
<rect x="120" width="100" height="100" rx="15" />
</svg>
<polygon>多边形
points:每个点的位置
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<!-- 具有默认填充的多边形示例 -->
<polygon points="0,100 50,25 50,75 100,0" />
<!-- 具有描边但无填充的相同的多边形形状示例 -->
<polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>
<path>路径
d:属性定义了一个要绘制的路径
- 移动到:
M
、m
- 画线至:
L
、l
、H
、h
、V
、v
- 三次方贝塞尔曲线:
C
、c
、S
、s
- 二次方贝塞尔曲线:
Q
、q
、T
、t
- 椭圆曲线:
A
、a
- 封闭路径:
Z
、z
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path
fill="none"
stroke="red"
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z" />
</svg>
<use>复制
xlink:href:复制元素的id
x:x轴的位置(相对于原有的位置)
y:y轴的位置(相对于原有的位置)
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.classA { fill:red }
</style>
<defs>
<g id="Port">
<circle style="fill:inherit" r="10"/>
</g>
</defs>
<text y="15">black</text>
<use x="50" y="10" xlink:href="#Port" />
<text y="35">red</text>
<use x="50" y="30" xlink:href="#Port" class="classA"/>
<text y="55">blue</text>
<use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
</svg>
<g>组
没有专属属性,搭配use使用
<svg
width="100%"
height="100%"
viewBox="0 0 95 50"
xmlns="http://www.w3.org/2000/svg">
<g stroke="green" fill="white" stroke-width="5">
<circle cx="25" cy="25" r="15" />
<circle cx="40" cy="25" r="15" />
<circle cx="55" cy="25" r="15" />
<circle cx="70" cy="25" r="15" />
</g>
</svg>
<defs>定义重复的元素
SVG 允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的引用元素定义在defs
元素里面。这样做可以增加 SVG 内容的易读性和无障碍。在defs
元素中定义的图形元素不会直接呈现。你可以在你的视口的任意地方利用 ``元素呈现这些元素。
没有专属属性
<svg width="80px" height="30px" viewBox="0 0 80 30"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient01">
<stop offset="20%" stop-color="#39F" />
<stop offset="90%" stop-color="#F3F" />
</linearGradient>
</defs>
<rect x="10" y="10" width="60" height="10"
fill="url(#Gradient01)" />
</svg>
<pattern>自定图案
提供给属性 fill
或属性 stroke
引用用来填充或描边的图案
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
</pattern>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#star)" />
<circle
cx="180"
cy="50"
r="40"
fill="none"
stroke-width="20"
stroke="url(#star)" />
</svg>
patternUnits属性
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<!-- userSpaceOnUse 所有几何属性都是相对于当前用户空间的-->
<pattern
id="p1"
x="12.5"
y="12.5"
width="25"
height="25"
patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" />
</pattern>
<!-- objectBoundingBox 有几何属性都相对于目标边界框 默认的 -->
<pattern
id="p2"
x=".125"
y=".125"
width=".25"
height=".25"
patternUnits="objectBoundingBox">
<circle cx="10" cy="10" r="10" />
</pattern>
<!-- Left square with user space tiles -->
<rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
<!-- Right square with bounding box tiles -->
<rect x="110" y="10" width="80" height="80" fill="url(#p2)" />
</svg>
<animate>动画
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<rect width="10" height="10">
<animate
attributeName="rx"
values="0;5;0"
dur="10s"
repeatCount="indefinite" />
</rect>
</svg>
js动态操作svg
需要使用createElementNS 函数创建的元素才能够添加进去,配合命名空间
<svg xmlns="http://www.w3.org/2000/svg" class="svg">
</svg>
let svg = document.querySelector(".svg");
let line = document.createElementNS('http://www.w3.org/2000/svg', "line");
svg.setAttribute('id', 'svg')
line.setAttribute('x1', '100')
line.setAttribute('y1', '100')
line.setAttribute('x2', '100')
line.setAttribute('y2', '600')
line.setAttribute('class', 'line')
svg.appendChild(line)