SVG的简单使用,入门绘制简单的案例

Easter79
• 阅读 655

一、svg介绍

可缩放矢量图形(Scalable Vector Graphics,SVG)是W3C推出的基于XML的二维矢量图形标准。SVG可以提供高质量的矢量图形渲染,同时由于支持JavaScript和文档对象模型,SVG图形通常具有强大的交互能力。另一方面,SVG作为W3C所推荐的基于XML的开放标准,能够与其他网络技术进行无缝集成。

二、入门案例

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <svg width="900" height="800">
        <!--绘制线(开始坐标与结束坐标)-->
        <line X1="150" Y1="50" X2="200" Y2="180" style="stroke: brown; stroke-width: 2;" />

        <!--绘制矩形-->
        <rect width="50" height="50" style="fill:yellow;stroke-width: 1px;stroke: black;" />

        <!--绘制多边形(依次连接点的坐标,最后一个与第一个要连接)-->
        <polygon points="600,100 460,200 710,230" style="fill:lime;stroke:purple;stroke-width:1" />

        <!--绘制曲线(依次连接点的坐标,最后一个与第一个不连接)-->
        <polyline points="600,230 460,330 710,360" style="fill:none;stroke:purple;stroke-width:1" />

        <!--绘制圆形(圆心,半径)-->
        <circle cx="180" cy="230" r="40" stroke="red" style="stroke-width: 2; fill:chartreuse" />

        <!--绘制椭圆-->
        <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:chartreuse;stroke:purple;stroke-width:2" />

    </svg>
</body>

</html>

三、结果展示

SVG的简单使用,入门绘制简单的案例

四、注意事项

svg与canvas最大不同就是,svg是dom元素,按下F12后,可以选中绘制的图形,并且绘制的图形比canvas清晰不少,但是这是操作dom元素,所以对性能的开销是比canvas大的多。

本文同步分享在 博客“鲨鱼小猫”(CSDN)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
晴空闲云 晴空闲云
3年前
svg绘制六种基本形状
svg简介svg意为可缩放矢量图形(ScalableVectorGraphics),最大的特点就是伸缩不会失真。svg是用xml进行描述的,在前端方面现在应用越来越广泛,各大浏览器支持越来越好了。这边尝试记录一下用svg画各种形状。svg标签要使用svg,需要先引入svg标签:html其中:width表示图片的宽。height表示图片的高。画长
Stella981 Stella981
3年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Stella981 Stella981
3年前
SVG 入门指南(看完,对SVG结构不在陌生)
SVG简介SVG,即可缩放矢量图形(ScalableVectorGraphics),是一种XML应用,可以以一种简洁、可移植的形式表示图形信息。目前,人们对SVG越来越感兴趣。大多数现代浏览器都能显示SVG图形,并且大多数矢量绘图软件都能导出SVG图形。SVG主要可以概括为以下几点:SVG指可伸
Stella981 Stella981
3年前
SVG跟随父级DIV自适应
后台返回过来的是这样的SVG标签<svgwidth"100%"height"100%"version"1.1"xmlns"http://www.w3.org/2000/svg"<gtransform"translate(00)"
Easter79 Easter79
3年前
SVG
1.SVG  图表,动效ScalableVectorGraphics 可缩放矢量图形 是一种用来描述二维矢量图形的XML标记语言。SVG面向图形,HTML面向文本。2.SVG和Canvas的区别  Canvas做图是在画布上通过js来控制动态  SVG是通过标签来实现的  SVG放大之后不会失真,Canvas放大后会失
Easter79 Easter79
3年前
SVG 入门指南(看完,对SVG结构不在陌生)
SVG简介SVG,即可缩放矢量图形(ScalableVectorGraphics),是一种XML应用,可以以一种简洁、可移植的形式表示图形信息。目前,人们对SVG越来越感兴趣。大多数现代浏览器都能显示SVG图形,并且大多数矢量绘图软件都能导出SVG图形。SVG主要可以概括为以下几点:SVG指可伸
Stella981 Stella981
3年前
DevEco Studio 如何将SVG文件转换为XML文件(HarmonyOS鸿蒙开发基础知识)
DevEcoStudio如何将SVG文件转换为XML文件SVG(ScalableVectorGraphics)可缩放矢量图形,是一种图像文件格式。目前由于HarmonyOS图形渲染引擎不支持SVG格式图片的渲染,开发者需要将SVG格式的图片文件转为为XML格式的文件,然后在布局文件中引
Easter79 Easter79
3年前
SVG跟随父级DIV自适应
后台返回过来的是这样的SVG标签<svgwidth"100%"height"100%"version"1.1"xmlns"http://www.w3.org/2000/svg"<gtransform"translate(00)"
Stella981 Stella981
3年前
SVG的简单使用,入门绘制简单的案例
一、svg介绍可缩放矢量图形(ScalableVectorGraphics,SVG)是W3C推出的基于XML的二维矢量图形标准。SVG可以提供高质量的矢量图形渲染,同时由于支持JavaScript和文档对象模型,SVG图形通常具有强大的交互能力。另一方面,SVG作为W3C所推荐的基于XML的开放标准,能够与其他网络技术进行无缝集成。
Stella981 Stella981
3年前
SVG
1.SVG  图表,动效ScalableVectorGraphics 可缩放矢量图形 是一种用来描述二维矢量图形的XML标记语言。SVG面向图形,HTML面向文本。2.SVG和Canvas的区别  Canvas做图是在画布上通过js来控制动态  SVG是通过标签来实现的  SVG放大之后不会失真,Canvas放大后会失
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k