如何使用SVG和简单图形绘制(1)

最新推荐文章于 2024-05-10 12:42:21 发布

earth_small_ma

最新推荐文章于 2024-05-10 12:42:21 发布

阅读量8.1k

点赞数 2

分类专栏： SVG 文章标签： SVG xml

本文链接：https://blog.csdn.net/earth_smallma/article/details/81194486

版权

SVG 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

如何使用SVG和简单图形绘制(1)

SVG(Scalable Vector Graphics——可缩放矢量图)，SVG图在放大或缩小的情况下不会失真

在SVG中全部使用标签来绘图，这些标签就相当于平时的html标签

SVG的使用

SVG的使用很简单，只需要添加一个svg标签即可

#svg{
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
}

<body>
    <svg id="svg">
        <line x1="100" y1="100" x2="200" y2="200"></line>
    </svg>
</body>

添加好svg标签后，再使用其他用来画图的svg标签(比如上面的line标签)便能画图了

使用SVG绘制图形

直线

line{
    stroke: black;
    /*将直线用黑色描出来，否则直线不可见*/
}

<svg id="svg">
    <line x1="100" y1="100" x2="200" y2="200"></line>
</svg>

line标签的行内属性解释：

x1,y1确定直线起点，x2,y2确定直线终点

注意：需要为line标签设置‘stroke:颜色’css属性后直线才能展现出来

矩形

rect{
    fill:transparent;/*设置填充为透明，去掉默认的填充*/
    stroke: black;/*再用stroke将矩形边框描出来*/
}

<svg id="svg">
    <rect x="100" y="100" width="100" height="100" rx="10" ry="10"></rect>
</svg>

rect标签行内属性解释：

x,y确定矩形左上角坐标（画矩形的起点）、width/height设置矩形宽高、rx,ry设置矩形四个角上，水平与垂直方向的圆角

这里写图片描述

注意：rect绘制矩形时不用设置stroke或fill样式就能将矩形展现出来，因为默认画出来的是用黑色填充的矩形。我们可以像上面那样——使用fill设置透明填充，用边框来展现矩形

圆形

circle{
    fill:transparent;
    stroke: black;
}

<svg id="svg">
    <circle r="50" cx="250" cy="250"></circle>
</svg>

circle标签行内属性解释：

r确定圆的半径、cx,cy确定圆心

注意：circle绘制圆时不用设置stroke或fill样式就能将圆展现出来，因为默认画出来的是用黑色填充的圆。我们可以像上面那样——使用fill设置透明填充，用边框来展现圆

椭圆

ellipse{
    fill:transparent;
    stroke: black;
}

<svg id="svg">
    <ellipse rx="50" ry="100" cx="250" cy="250"></ellipse>
</svg>

ellipse标签行内属性解释：

rx,ry分别确定椭圆横半轴与纵半轴长度，cx,cy确定圆心

注意：circle绘制椭圆时不用设置stroke或fill样式就能将椭圆展现出来，因为默认画出来的是用黑色填充的椭圆。我们可以像上面那样——使用fill设置透明填充，用边框来展现椭圆

折线

polyline{
    fill:transparent;
    stroke: black;
}

<svg id="svg">
    <polyline points="0 0, 100 100, 200 0, 300 100, 400 0"></polyline>
</svg>

polyline标签行内属性解释：

就是由‘,’分割的一组族坐标点组成，将这些点连起来就是一条折线

注意：polyline绘制折线时不用设置stroke或fill样式就能将折线展现出来，因为默认画出来的是将折线起点与终点连起来(只是形式上连起来)后用黑色填充的封闭图形。我们可以像上面那样——使用fill设置透明填充，用边框来展现折线

多边形

<svg id="svg">
    <polygon points="50 50,100 100,150 50,200 100"></polygon>
</svg>

polygon标签行内属性解释

就是由‘,’分割的一组族坐标点组成，将这些点连起来就是一条折线，再将折线的起始点与终点连起来（实际上的连接）便是一个多边形

注意：polygon绘制多边形时不用设置stroke或fill样式就能将多边形展现出来，因为默认画出来的是将折线起点与终点连起来后用黑色填充的封闭图形。我们可以像上面那样——使用fill设置透明填充，用边框来展现多边形

文本

<svg id="svg">
    <text x="100" y="100">Hello World!</text>
</svg>

text标签行内属性解释：

x,y确定文本框左上角坐标

注意：文本会直接显示，不用stroke或fill

一些样式属性

这些属性用来设置图形的css样式，写在样式表中，上面代码已经展现了

‘fill:颜色’

设置填充颜色

‘fill-opacity:透明度’

设置填充色透明度

‘stroke:颜色’

设置描边颜色

‘stroke-width:10px’

设置描边宽度

‘stroke-opacity:透明度’
stroke-linecap: butt | round | square(默认)

这里写图片描述

用于设置一条线起点与终点两个端点的样式

polyline{
    fill: transparent;

    stroke: black;
    stroke-width: 10px;
    stroke-linecap: round;
}

<svg id="svg">
    <polyline points="20 10, 100 100, 200 10, 300 100, 400 10"></polyline>
</svg>

stroke-linejoin: bavel | round | miter

这里写图片描述

用于设置一条线拐点处的样式，不包含起点与终点两个端点

polyline{
    fill: transparent;

    stroke: black;
    stroke-width: 10px;
    stroke-linejoin: miter;
}

<svg id="svg">
    <polyline points="20 10, 100 100, 200 10, 300 100, 400 10"></polyline>
</svg>

earth_small_ma

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
如何使用SVG和简单图形绘制(1)

如何使用SVG和简单图形绘制(1)SVG(Scalable Vector Graphics——可缩放矢量图)，SVG图在放大或缩小的情况下不会失真在SVG中全部使用标签来绘图，这些标签就相当于平时的html标签SVG的使用SVG的使用很简单，只需要添加一个svg标签即可#svg{ width: 500px; height: 500px; bord...
复制链接

扫一扫

专栏目录