SVG
2023-06-27 14:41:21 5 举报AI智能生成
SVG知识点梳理
作者其他创作
大纲/内容
属性
xmlns
http://www.w3.org/2000/svg
xmlns:xlink
http://www.w3.org/1999/xlink
style
viewBox
x：位置坐标x
y：位置坐标y
元素
g
用来组合对象的容器，属性会被子元素继承
transform：变换
rotate(30 50 50)，绕着点（50,50），顺时针旋转30度）
style
rect
基于一个角位置以及高贺宽，来创建一个圆角矩形，
此位置是相对于任何封闭的（父）元素位置而言的
此位置是相对于任何封闭的（父）元素位置而言的
x
y
rx
圆角宽度舍入
ry
圆角高度舍入
height
width
style
circle
cx
cy
r
style
ellipse 椭圆
cx
cy
rx
ry
style
line
x1
y1
x2
y2
style
polyline 折线
fill
stroke
points
style
Polygon 多边形
points
style
path
所有带有<path>元素的绘图都在d属性中指定。
d属性包含绘图命令。 在上面的实例中，
d属性包含绘图命令。 在上面的实例中，
M表示“Move to”(移动到)命令，
A表示“Arc”(弧形)命令，
大写命令(A)使用绝对坐标作为其终点
小写命令(A)使用相对坐标(相对于起点)
L表示“Line”(直线)命令。
大写版本(L)绘制一条直线到传递给命令的绝对点
而小写版本(l)版本绘制一条直线到传递给命令的相对点
绘制二次Bezier曲线是使用Q和Q命令完成的
使用C和c命令绘制三次贝塞尔曲线
这意味着从绘制的最后一个点回到第一点的线的快捷命令。该命令是Z（或z-大写和小写闭合路径命令之间没有区别）
style
Marker
<marker> 元素必须嵌套在一个<defs>元素内
标记开始，标记中间和标记结束（分别为：marker-start，marker-mid和marker-end）
Text
可以实现绘制文字,文字旋转,多行文字,具有超级链接的文字等
使用<tspan>元素，可以将<text>元素安排在任意数量的子组中。
tspan
<tspan>元素用于在SVG中绘制多行文本。不必绝对定位每行文本，
该 <tspan>元素使相对于前一行文本放置一行文本成为可能。
该 <tspan>元素还使用户可以一次选择并复制粘贴几行文本，而不仅仅是一个text元素。
该 <tspan>元素使相对于前一行文本放置一行文本成为可能。
该 <tspan>元素还使用户可以一次选择并复制粘贴几行文本，而不仅仅是一个text元素。
垂直定位：如果希望将线垂直相对放置，可以使用dy 属性（delta y）
水平定位：要将文本相对定位在x轴上，可以使用dx属性（delta x
样式tspan元素
基线偏移的上标和下标
textPath
用于沿路径（例如，圆形）布置文本
defs
将以下元素放入<defs>元素
任何形状元素（rect，line等）
g
symbol
symbol
用于定义可重复使用的符号。 除非被 <use>元素引用，否则不会显示嵌套在 <symbol>内的形状。
use
可以重用SVG文档中其他位置（包括 <g>元素和 <symbol>元素）的SVG形状。
可以在 <defs>元素内部（使形状直到使用之前不可见）或外部定义重用形状。
可以在 <defs>元素内部（使形状直到使用之前不可见）或外部定义重用形状。
如果原始形状上没有设置CSS样式，则可以在重用形状时设置CSS样式。
image
switch
子主题
用于以平铺方式填充图形元素
clipPath
用于根据特定路径剪切SVG形状。也称为SVG裁剪。路径内部的形状部分是可见的，而外部的部分则是不可见的。
mask
遮罩功能，可以将遮罩应用于SVG形状。
SVG遮罩是剪切路径的更高级版本，
用于确定SVG形状的哪些部分可见以及具有何种透明度。
SVG遮罩是剪切路径的更高级版本，
用于确定SVG形状的哪些部分可见以及具有何种透明度。
filter
坐标系统
综述，与普通的笛卡尔坐标体系相比，y轴是相反的
单位
px
默认单位
em
默认字体大小-通常是字符的高度
ex
字符X的高度
pt
点，七十二分之一英寸
pc
picas，六分之一英寸
cm
公分
mm
in
英寸
style
stroke：笔、刷子、笔画
stroke-width
stroke-dasharray：虚线设置
stroke-dashoffset 设置用于绘制此形状轮廓的笔划（直线）破折号偏移量。
stroke-linecap 设置用于绘制此形状轮廓的笔划（线）线帽。有效值为round，butt和square。
stroke-linecap 设置用于绘制此形状轮廓的笔划（线）线帽。有效值为round，butt和square。
stroke-opacity 设置用于绘制此形状轮廓的笔触（直线）不透明度。
fill
fill-opacity：透明度
fill-rule 设置形状的填充规则。
marker 设置沿此形状的线（边）使用的标记。
marker-start 设置沿此形状的线（边）使用的开始标记。
marker-mid 设置沿此形状的线（边）使用的中间标记。
marker-end 设置沿此形状的线（边）使用的结束标记。
text-rendering 设置用于绘制此形状轮廓的文本渲染。
alignment-baseline 设置文本与其对齐方式x和y坐标。
baseline-shift 设置用于呈现文本的基线偏移。
dominant-baseline 设置主要基线。
glyph-orientation-horizontal 设置水平字形方向。
glyph-orientation-vertical 设置垂直字形方向。
kerning 设置渲染文本的字距（字距是字母间距）。
stop-color 设置在渐变中使用的stop元素中使用的终止色。
stop-opacity 设置stop在渐变中使用的元素中使用的停止不透明度。
0 条评论
下一页
