欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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; 设置描边透明度
相关标签: svg