SVG基础

最新推荐文章于 2024-05-24 20:40:38 发布

原创最新推荐文章于 2024-05-24 20:40:38 发布 · 388 阅读

0 ·

CC 4.0 BY-SA版权

echarts 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍SVG标签使用方法，包括设置画布大小、绘制矩形、圆形、文本、线条及路径等基本元素。深入探讨各元素属性如填充、边框、透明度及定位方式。

svg标签: 设置画图时画布的大小,其中可以通过width和height设置长宽。

<svg width=500 height=500></svg>

可以在svg标签中添加rect标签、text标签、line标签等

rect标签：可以用来绘制矩形

<rect x=20 y=20 width=100 height=200 stroke="red" stroke_width=2 fill="blue"/>

（1）x，y表示矩形左上角的顶点所在的位置（在整个界面的左上角为0，0）,一般有自带的格式,设置x,y都为0但是真正显示的位置并不一定在整个显示页面的最左上角。可以通过下面的代码消除自带的格式

<style>
    html,body{
        padding:0; 
        margin: 0;
    }
 </style>

rx，ry属性可以使矩形产生圆角
（2）rect标签的属性width和height设置矩形的长宽,
（3）fill属性可以设置矩形的填充颜色,
（4）stroke属性设置矩形边框的颜色,
（5）stroke_width属性设置矩形边框的宽度,
（6）fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
（7）stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
（8）如果要定义整个图形的透明度可以直接用opacity标签（合法的范围是：0 - 1），

circle标签：绘制圆形

  <svg>
        <circle cx="50" cy="50" r="50" stroke="blue" stroke_width=2 fill="red"/>
    </svg>

（1）cx，cy表示圆心的位置，r表示半径
（2）stroke属性设置边框的颜色，stroke_width设置边框的宽度

text标签：可以定义文本，设置在svg标签内部

 <svg id="hist01" width=500 height=500>
        <text x=0 y=20 fill="red">直方图</text>
    </svg>

text标签里的x，y可以设置文本的位置，fill属性可以设置文本的颜色

line标签：用来创建线条

<line x1=0 y1=0 x2=800 y2=500 stroke="red"></line>

x1,y1表示线条起始点的位置，x2，y2表示线条结束点的位置
stroke属性用来设置颜色，stroke_width属性设置边框的宽度。

path标签：用来定义路径
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
所有命令均允许小写字母，大写表示绝对定位，小写表示相对定位。