SVG教程
2020-02-09 22:11:46 0 举报AI智能生成
SVG教程
作者其他创作
大纲/内容
因子解说
stroke
stroke
定义轮廓颜色
stroke="red"
stroke-width
定义轮廓大小
stroke-width="2"
stroke-linecap
定义轮廓始终样式
stroke-linecap="square"
stroke-linecap="butt"
stroke-linecap="round"
stroke-dasharray
定义轮廓虚线
stroke-dasharray="20,10,5,5,5,10"
子主题 2
样式
引样
style
标识
基本颜色
stroke:rgb(99,99,99)
宽度
stroke-width:2
值说明
颜色
RGB颜色
rgb(99,99,99)
英文
red
blue
不填充
none
轮廓
百分比
50%
数值
120
子主题 3
形状
路径
元素
path
因子
标签
id
路径
d
路径值说明
移动到
M
moveto
路线至
L
lineto
水平线至
H
horizontal lineto
垂直线至
V
vertical lineto
曲线至
C
curveto
平滑曲线
S
smooth curveto
二次贝子曲线
Q
quadratic Bézier curve
平滑二次贝子曲线
T
smooth quadratic Bézier curveto
椭圆弧
A
elliptical Arc
闭合路径
Z
closepath
引样标识
填充颜色
fill
轮廓颜色
stroke
轮廓宽度
stroke-width
填充透明度
fill-opacity
轮廓透明度
stroke-opacity
整体透明度
opacity
直线
元素
line
因子
X轴开始点
x1
Y轴开始点
y1
X轴结束点
x2
Y轴结束点
y2
引样标识
轮廓颜色
stroke
轮廓宽度
stroke-width
整体透明度
opacity
曲线
元素
polyline
因子
图形点数组
points
例子
points="200,10 250,190 160,210"
引样标识
填充颜色
fill
轮廓颜色
stroke
轮廓宽度
stroke-width
填充透明度
fill-opacity
轮廓透明度
stroke-opacity
整体透明度
opacity
矩形
元素
rect
因子
X轴开始点
x
Y轴开始点
y
长/宽
width
高
height
圆角X轴
rx
圆角Y轴
ry
引样标识
填充颜色
fill
轮廓颜色
stroke
轮廓宽度
stroke-width
填充透明度
fill-opacity
轮廓透明度
stroke-opacity
整体透明度
opacity
多边形
元素
polygon
因子
图形点数组
points
例子
points="200,10 250,190 160,210"
引样标识
填充颜色
fill
轮廓颜色
stroke
轮廓宽度
stroke-width
填充透明度
fill-opacity
轮廓透明度
stroke-opacity
整体透明度
opacity
线相交填充
fill-rule
值
内部
nonzero
外部
evenodd
继承
inherit
圆形
元素
circle
因子
圆心X轴
cx
圆心Y轴
cy
半径
r
引样标识
填充颜色
fill
轮廓颜色
stroke
轮廓宽度
stroke-width
填充透明度
fill-opacity
轮廓透明度
stroke-opacity
整体透明度
opacity
椭圆形
元素
ellipse
因子
圆心X轴
cx
圆心Y轴
cy
X轴半径
rx
Y轴半径
ry
引样标识
填充颜色
fill
轮廓颜色
stroke
轮廓宽度
stroke-width
填充透明度
fill-opacity
轮廓透明度
stroke-opacity
整体透明度
opacity
文本
元素
text
嵌套元素
文字路径
textPath
因子
起点
xlink
例子
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
分组子内容
tspan
因子
X轴开始位置
x
Y轴开始位置
y
使用格式样例
<text>需要显示的文字</text>
因子
显示起点X轴
x
显示起点Y轴
y
字体颜色
fill
style="fill:red;"
使用格式
元素使用格式
<元素 因子1="XX" 因子2="XX" 引样="标识1:XXX;标识2:XXXX"/>
0 条评论
下一页
