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