有一次看一个项目的时候，看到图片的格式为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. shell脚本学习之6小时搞定(1)

    shell脚本学习之6小时搞定(1) 简介 Shell是一种脚本语言,那么,就必须有解释器来执行这些脚本. Unix/Linux上常见的Shell脚本解释器有bash.sh.csh.ksh等,习惯上把 ...

  2. Blazor VS 传统Web应用程序

    原文作者: Christian Findlay 原文链接: https://christianfindlay.com/2020/07/09/blazor-vs-traditional-web-apps ...

  3. Kafka 探险 - 架构简介

    Kafka 探险 - 架构简介 这个 Kafka 的专题,我会从系统整体架构,设计到代码落地.和大家一起杠源码,学技巧,涨知识.希望大家持续关注一起见证成长! 我相信:技术的道路,十年如一日!十年磨一 ...

  4. AtCoder Beginner Contest 188 F - +1-1x2 思维题

    题目描述 给你两个数 \(x\),\(y\) 可以对 \(x\) 进行 \(+1,-1\) 或 \(\times 2\) 的操作 问最少操作多少次后变为 \(y\) \(x,y \leq 10^{18 ...

  5. laravel邮件发送

    laravel邮件发送 使用邮件发送类Mail 文本 静态方法 raw() 富文本 静态方法 send() 注:使用邮件发送必须有邮件账号,需要开启smtp协议,现在主流服务器都支持,smtp默认端口 ...

  6. 【JavaWeb】AJAX 请求

    AJAX 请求 什么是 AJAX AJAX(Asynchronous JavaScript And XMl),即异步 JS 和 XML.是指一种创建交互式网页应用的网页开发技术. AJAX 是一种浏览 ...

  7. Centos 安装 Node-v12.17.0-linux-x64.tar.gz

    wget https://nodejs.org/dist/v12.17.0/node-v12.17.0-linux-x64.tar.gz tar -zxf node-v12.17.0-linux-x6 ...

  8. CSS 奇思妙想边框动画

    今天逛博客网站 -- shoptalkshow,看到这样一个界面,非常有意思: 觉得它的风格很独特,尤其是其中一些边框. 嘿嘿,所以来一篇边框特辑,看看运用 CSS,可以在边框上整些什么花样. bor ...

  9. MySQL select 子查询的使用

    ### 子查询 >where 这个值是计算出来的 >本质:`在 where 语句中嵌套一个子查询语句` ```sql /*============== 子查询 ============== ...

  10. kubernets与API服务器进行交互

    一  为何需要与kubernets集群的API服务器进行交互 1.1  kubernets提供了一种downapi的资源可以将pod的元数据渲染成环境变量或者downward卷的形式挂载到容器的文件系 ...