有一次看一个项目的时候，看到图片的格式为svg,作为萌新的我瞬间有点小懵，这可是之前从没有见到过的格式，于是就开始上某度进行学习，发现某博主的优秀文章，进行转载方便自己学习，感谢原博主的优秀文章。

·svg介绍

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

特点：

不依赖分辨率

支持事件处理器

最适合带有大型渲染区域的应用程序（比如谷歌地图）

复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

适合游戏应用

svg的属性

矩形 - rect元素/圆 - circle元素/椭圆 - ellipse元素/直线 - line元素/折线 - polyline元素/多边形 - polygon元素/路径 - path元素

其他需要学习svg的地方，会不断的继续学习和浏览优秀博主的文章，博客持续更新。

原文地址：

https://juejin.im/entry/58522e031b69e60056c33147

使用 html5 svg 绘制图形的更多相关文章

  1. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  2. HTML5—canvas绘制图形（1）

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

  3. SVG绘制图形

    一.SVG介绍 1.SVG指可伸缩矢量图片 2.SVG用来定义用于网络的基于矢量的图形 3.SVG使用XML格式定义图形 4.SVG图像在放大或改变尺寸的情况下其图形质量不会有损失 5.SVG是万维网 ...

  4. HTML5：绘制图形

    canvas绘图通过属于 canvas 的 JavaScript 方法完成 针对不支持html5的IE浏览器 <!--[if IE]> <script type="text ...

  5. HTML5 canvas绘制图形

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  7. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  8. 18个超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...

  9. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

随机推荐

  1. Vue从零开发SPA项目

    所谓SPA(single page web application),就是单页面项目的意思. vue的亮点就是我们只需要关注数据的变化,下面演示一下从零开始创建一个独立项目,并且能自定义路由,提交表单 ...

  2. PHP jquer网页打印插件 PrintArea

    <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv=" ...

  3. node.js 爬取图片

    /** * _ooOoo_ * o8888888o * 88" . "88 * (| -_- |) * O\ = /O * ____/`---'\____ * . ' \\| |/ ...

  4. 如何实现一个简易版的 Spring - 如何实现 Constructor 注入

    前言 本文是「如何实现一个简易版的 Spring」系列的第二篇,在 第一篇 介绍了如何实现一个基于 XML 的简单 Setter 注入,这篇来看看要如何去实现一个简单的 Constructor 注入功 ...

  5. DHCP最佳实践（二）

    这是Windows DHCP最佳实践和技巧的最终指南. 如果您有任何最佳做法或技巧,请在下面的评论中发布它们. 在本指南(二)中,我将分享以下DHCP最佳实践和技巧. 从DHCP作用域中排除IP 了解 ...

  6. 【Linux】自建回收站

    linux rm命令是即刻删除的,而且挺多人喜欢加上-f强制命令,更暴力的是删除文件夹直接 rm -rf ,这样子代表你执行完后,就完全被干掉了. 还是推荐在linux下设置回收站,写一个shell脚 ...

  7. 环境变量IFS

    环境变量IFS的值是由1个空格.1个制表符.1个换行符依序构成的字符串,也就是" \t\n"字符串. #查看IFS变量值的长度: test ~ # expr length &quo ...

  8. Redis中哈希分布不均匀该怎么办

    前言 Redis 是一个键值对数据库,其键是通过哈希进行存储的.整个 Redis 可以认为是一个外层哈希,之所以称为外层哈希,是因为 Redis 内部也提供了一种哈希类型,这个可以称之为内部哈希.当我 ...

  9. 在Ubuntu18.04下编译出ffmpeg（支持推流H265成rtmp）

    Ubuntu18.04下编译libx264.libx265.libfdk_aac和ffmpeg 一.编译x264库 二.编译fdk-aac库 三.编译x265库 四.编译FFmpeg源码 五.设置环境 ...

  10. Gradle使用及配置

    构建工具:Gradle(6.8) 下载地址:https://gradle.org/releases/ 下载最新版的二进制文件即可,下载"gradle-6.8.1-bin.zip文件,下载后完 ...