Web笔记-html中svg的基本使用

￡神魔★判官ぃ 2022-12-22 04:53 114阅读 0赞

程序运行截图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNzg0NDI3NjE_size_16_color_FFFFFF_t_70][]

代码如下：

<!DOCTYPE html>
    <html>
    <head>
    </head>
    
    <body>
        <svg width="200" height="200">
            <rect x="0" y="0" width="100" height="100" fill="red"></rect>
            <line x1="100" y1="0" x2="200" y2="100" stroke="green" stroke-width="1"></line>
            <polygon points="0,100 0,200 100,200" fill="red"></polygon>
            <circle cx="150" cy="150" r="50" stroke-width="1" stroke="green" fill="red"></circle>
        </svg>
    </body>
    
    </html>

svg是矢量绘图，和canvas一样是一个标签。

浏览器中只有Dom元素才能被选中。

svg是通过svg标签来绘图。

canvas通过JavaScript API来绘图。

canvas绘制的图是不能被选中的。

svg是可以被选中的，每一个元素都是个dom。

Svg不管放多大，都可以保持在可升缩的范围内。而canvas放大就锯齿了（可以对其进行抗锯齿）。

Canvas适合做动画。

Svg适合做展示相关的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNzg0NDI3NjE_size_16_color_FFFFFF_t_70]: /images/20221120/51b203f6991a4563a3c51391bd72e722.png

发表评论取消回复

表情：

评论列表（有 0 条评论，114人围观）

还没有评论，来说两句吧...

相关阅读

相关 Web笔记-html中svg的基本使用

程序运行截图如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

￡神魔★判官ぃ/ 2022年12月22日 04:53/ 0 赞/ 114 阅读

相关 vue中使用svg

首先使用vue cli3.x初始化一个基础框架新建svg组件  <t

川长思鸟来/ 2022年12月05日 00:43/ 0 赞/ 222 阅读

相关 Html 使用svg图标、iconfont的使用方法

[https://blog.csdn.net/qq\_39176732/article/details/81390423][https_blog.csdn.net_qq_391

╰+攻爆jí腚メ/ 2022年10月28日 03:46/ 0 赞/ 268 阅读

相关 SVG格式图片转成HTML中SVG的Path路径

svg的图片右键-记事本打开 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

快来打我*/ 2022年10月17日 10:54/ 0 赞/ 221 阅读

相关 html5之SVG

html之SVG -------------------- whit’s is the SVG？ SVG stands fo

末蓝、/ 2022年07月16日 04:14/ 0 赞/ 288 阅读

相关【HTML5】——SVG基础

<table> <tbody> <tr> <td><b>目录</b></td> </tr> </tbody> </table> 1.什么是SVG

﹏ヽ暗。殇╰゛Y/ 2022年06月07日 05:13/ 0 赞/ 332 阅读

相关 Html的基本使用

> `HTML`(Hypertext Markup Language)即超文本标记语言 HTML特点 HTML 不需要编译,直接由浏览器执行 HTML 是一

逃离我推掉我的手/ 2022年04月23日 22:32/ 0 赞/ 214 阅读

相关 html5使用svg

html5使用svg 创建svg文件： <?xml version="1.0" standalone="no"?> <!DOCTYPE svg P

系统管理员/ 2022年04月03日 05:47/ 0 赞/ 289 阅读

相关 html——svg

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"><!--文档的元数

淩亂°似流年/ 2022年01月06日 07:04/ 0 赞/ 213 阅读

相关 svg 基本配置和使用

svg文件在浏览器打开就可查看在html中使用第一种将svg文件按照src来引入使用如

迷南。/ 2021年07月24日 23:26/ 0 赞/ 625 阅读