svg
程序员文章站
2022-05-03 21:26:25
...
视口
viewport
SVG可见区域的大小,类比于画布
实例
<svg width="800" height="400"></svg>
viewBox
相当于在显示器(画布)上截屏时的框,将截取的内容显示出来
viewBox="x y width height"
-
x:左上角横坐标
-
y:左上角纵坐标
-
width : 宽度
-
height:高度
坐标
SVG transform与 CSS transform 不同
我们一般使用SVG 的transform,因为IE不支持CSS的
translate 位移
SVG 相对于左上角, CSS相当于自己的中心点
不要带单位
scale 缩放
SVG 相对于左上角缩放,距离坐标原点和距离和元素大小都会被缩放,在视窗中会重新定位
skew 斜切
同上
形状
矩形<rect>
rx:x方位的圆角
ry:y方位的圆角
圆形<circle>
r:圆的半径
cx:圆心的x位置
cy:圆心的y位置
椭圆<ellipse>
rx:椭圆x半径
ry:椭圆y半径
cx:椭圆中心x位置
cy:椭圆中心y位置
线<line>
x1:起点x位置
y1:起点y位置
x2:终点x位置
y2:终点y位置
折线<polyline>
用空白和逗号连接,可以写多个点
最后一个点会和第一个点要写一样,才会闭合
<polyline points="50 49, 10 15, 25 1, 75 1, 90 15, 50 49" stroke="#C7000B" fill="transparent" />
多边形<polygon>
最后一个点会和第一个点闭合
<polygon points="50 49, 10 15, 25 1, 75 1, 90 15, 50 49" stroke="#C7000B" fill="transparent" />
路径<path>
可以绘制多种图形
大写字母表示绝对位置,小写字母表示相对位置
- M 移动画笔位置,表示开始的位置
- L 在位置之间画一条直线
- H 绘制水平线
- V 绘制垂直线
- Z 把最后一个点和起点闭合
<path d="M5 5 L 25 5 L 25 25 L 5 25 L 5 5" stroke="#C7000B" fill="transparent" />
<path d="M35 5 H 55 V 25 H 35 L 35 5" stroke="#C7000B" fill="transparent" />
<path d="M65 5 H 85 V 25 H 65 Z" stroke="#C7000B" fill="transparent" />
图标
- fill: blue; 设置图标颜色
- fill-opacity: 0.5; 设置图标透明度
- stroke: red; 设置描边颜色
- stroke-width: 10px; 设置描边宽度
- stroke-opacity: 0.8; 设置描边透明度