1、可以直接在html内写svg

(1)width宽度,height高度

(2)xmlns svg的规则

<svg
xmlns="http://www.w3.org/2000/svg"
width="300"
height="22"
></svg>

2、rect节点

(1)长方形

(2)x、y位置

(3)rx、ry圆大小

(4)fill填充颜色

<svg
xmlns="http://www.w3.org/2000/svg"
width="300"
height="22">
<rect x="10" y="14" width="300" rx="7" ry="7" height="14" fill="#972716" />
</svg>

3、circle节点

(1)圆形

(2)cx、cy位置

(3)r圆直径

(4)fill填充颜色

<svg
xmlns="http://www.w3.org/2000/svg"
width="300"
height="22">
<circle cx="149" cy="11" r="11" fill="#972716" />
</svg>

4、path画线节点

(1)画线

(2)d画线的内容

  1、M原点

  2、Q弧线

  3、L直线

  4、Z闭合

(3)fill填充

(4)stroke描边

<svg
xmlns="http://www.w3.org/2000/svg"
width="300"
height="22">
<path
d="
M 0 11
Q 0 4 7 4
L 136.5 4
Q 136.5 0 143 0
Q 149.5 0 149.5 4
L 200 4
L 200 11
Q 200 4 193 4
L 200 4
L 200 18
L 193 18
Q 200 18 200 11
L 200 18
L 0 18
Z
"
stroke="black"
fill="transparent"
>
</svg>

5、viewBox属性

(1)min-xmin-ywidth and height。(其中width和height是按比例的并不是数值,自适应页面的话还是要使用viewBox属性)

<svg width="100%" height="100%" viewBox="0 0 100 100">
<rect x="0" y="0" width="50" height="50" fill="#972716"/>
</svg>

  

svg简单的应用的更多相关文章

  1. svg和canvas比较以及svg简单介绍

    文章地址:https://www.cnblogs.com/sandraryan/ 什么是svg 可缩放矢量图形(Scalable Vector Graphics) 1. 一种使用XML描述的2D图形语 ...

  2. d3 svg简单学习

    矩形 <rect x="/> 圆形 <circle cx="/> 椭圆 <ellipse cx="/> 线 <line x1=& ...

  3. HTML5中的SVG

    * SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...

  4. HTML5程序设计--SVG

    SVG(Scalable Vector Graphics):可缩放矢量图形,一种二维图形表示语言. 借助SVG,我们可以实现很多同Canvas API类型的绘制操作,但在Canvas元素上绘制文本的时 ...

  5. 简单又炫酷的two.js 二维动画教程

      前  言 S     N 今天呢给大家介绍一个小js框架,Two.JS.其实在自己学习的过程中并没有找到合适的教程,所以我这种学习延迟的同学是有一定难度的,然后准备给大家整理一份,简单易懂的小教程 ...

  6. 小强的HTML5移动开发之路(17)——HTML5内联SVG

    来自:http://blog.csdn.net/dawanganban/article/details/18189181 一.什么是SVG 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集) ...

  7. 前端 —— SVG

    0. 简介 SVG:可缩放矢量图形: SVG 是代码,通过浏览器的解析而渲染成一种图形: 可缩放矢量图形是基于可扩展标记语言(XML),以描述二维矢量图形的一种图形格式,由万维网联盟( World W ...

  8. SVG 基本绘图方法总结

    基本内容:   * SVG并不属于HTML5专有内容    * HTML5提供有关SVG原生的内容   * 在HTML5出现之前,就有SVG内容   * SVG,简单来说就是矢量图   * SVG文件 ...

  9. SVG可伸缩矢量图形

    SVG可伸缩矢量图形 总结 1.svg就像普通标签那么使用 2.svg是xml 3.svg是矢量图,而canvas是位图 学习要点 对HTML5中的SVG有初步的了解 什么是SVG 简单的说SVG文档 ...

随机推荐

  1. case when语法

    Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数: CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END ...

  2. Oracle 调试存储过程

    调试过程对找到一个存过的bug或错误是非常重要的,Oracle作为一款强大的商业数据库,其上面的存过少则10几行,多则上千行,免不了bug的存在,存过上千行的话,找bug也很费力,通过调试可以大大减轻 ...

  3. debian设置limits.conf

    最近已经把自己的游戏框架主要功能完成得差不多了,决定将自己的开发环境从debian7升级到debian9,不然太多第三方依赖都跟不上了.debian10刚出来,MongoDB还没适配,所以暂不考虑. ...

  4. weui 注意事项

    个人随笔日记,还请小心采纳为甚 手机移动web开发必须要做的两点: 1.body中加上ontouchstart,即<body ontouchstart>...</body>: ...

  5. 处理Android键盘覆盖input和textarea框的问题

    $(window).resize(function(){ $('input[type="text"],textarea').on('click', function () { va ...

  6. sql 分页查询 (每次6行 )

    --  对比 数据 是否 相同 select * from [dbo].[ProjecrInfo] where Project_state='已审核' -- 查询 已经 审核 有多少数据 -- 每次 ...

  7. 实验楼Python项目

    整理几个实验楼小项目,有免费的也有会员的,会员的可以参考他们的实验报告. 直接去实验楼这个网站,粘贴上就能搜到. 免费专区: Kmeans聚类算法评估足球比赛 Python实现3D建模工具 K-近邻算 ...

  8. delphi xe5 fastreport4.14 中文很多时换行不正确

    用一般的frxMEMOview 中文换行是瞎换,缺少数据,换成frxrichview 即可, frxrichview 使用注意点 1).Delphi中文很多时换行不正确 2).要在窗体上拖一个frxr ...

  9. VS---《在VS2010中 使用C++创建和使用DLL》(001)

    VS---<在VS2010中 使用C++创建和使用DLL>(001) 需要学习制作和使用动态库,现在知道:DLL调用有两种方式,一种是静态调用,另外一种是动态调用.详细的还不算明白,等后期 ...

  10. python pip 'nonetype' object has no attribute 'bytes'

    python pip 'nonetype' object has no attribute 'bytes' 更新 pip for Windows : python -m pip install -U ...