svg简单的应用
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-x
, min-y
, width
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简单的应用的更多相关文章
- svg和canvas比较以及svg简单介绍
文章地址:https://www.cnblogs.com/sandraryan/ 什么是svg 可缩放矢量图形(Scalable Vector Graphics) 1. 一种使用XML描述的2D图形语 ...
- d3 svg简单学习
矩形 <rect x="/> 圆形 <circle cx="/> 椭圆 <ellipse cx="/> 线 <line x1=& ...
- HTML5中的SVG
* SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...
- HTML5程序设计--SVG
SVG(Scalable Vector Graphics):可缩放矢量图形,一种二维图形表示语言. 借助SVG,我们可以实现很多同Canvas API类型的绘制操作,但在Canvas元素上绘制文本的时 ...
- 简单又炫酷的two.js 二维动画教程
前 言 S N 今天呢给大家介绍一个小js框架,Two.JS.其实在自己学习的过程中并没有找到合适的教程,所以我这种学习延迟的同学是有一定难度的,然后准备给大家整理一份,简单易懂的小教程 ...
- 小强的HTML5移动开发之路(17)——HTML5内联SVG
来自:http://blog.csdn.net/dawanganban/article/details/18189181 一.什么是SVG 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集) ...
- 前端 —— SVG
0. 简介 SVG:可缩放矢量图形: SVG 是代码,通过浏览器的解析而渲染成一种图形: 可缩放矢量图形是基于可扩展标记语言(XML),以描述二维矢量图形的一种图形格式,由万维网联盟( World W ...
- SVG 基本绘图方法总结
基本内容: * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件 ...
- SVG可伸缩矢量图形
SVG可伸缩矢量图形 总结 1.svg就像普通标签那么使用 2.svg是xml 3.svg是矢量图,而canvas是位图 学习要点 对HTML5中的SVG有初步的了解 什么是SVG 简单的说SVG文档 ...
随机推荐
- case when语法
Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数: CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END ...
- Oracle 调试存储过程
调试过程对找到一个存过的bug或错误是非常重要的,Oracle作为一款强大的商业数据库,其上面的存过少则10几行,多则上千行,免不了bug的存在,存过上千行的话,找bug也很费力,通过调试可以大大减轻 ...
- debian设置limits.conf
最近已经把自己的游戏框架主要功能完成得差不多了,决定将自己的开发环境从debian7升级到debian9,不然太多第三方依赖都跟不上了.debian10刚出来,MongoDB还没适配,所以暂不考虑. ...
- weui 注意事项
个人随笔日记,还请小心采纳为甚 手机移动web开发必须要做的两点: 1.body中加上ontouchstart,即<body ontouchstart>...</body>: ...
- 处理Android键盘覆盖input和textarea框的问题
$(window).resize(function(){ $('input[type="text"],textarea').on('click', function () { va ...
- sql 分页查询 (每次6行 )
-- 对比 数据 是否 相同 select * from [dbo].[ProjecrInfo] where Project_state='已审核' -- 查询 已经 审核 有多少数据 -- 每次 ...
- 实验楼Python项目
整理几个实验楼小项目,有免费的也有会员的,会员的可以参考他们的实验报告. 直接去实验楼这个网站,粘贴上就能搜到. 免费专区: Kmeans聚类算法评估足球比赛 Python实现3D建模工具 K-近邻算 ...
- delphi xe5 fastreport4.14 中文很多时换行不正确
用一般的frxMEMOview 中文换行是瞎换,缺少数据,换成frxrichview 即可, frxrichview 使用注意点 1).Delphi中文很多时换行不正确 2).要在窗体上拖一个frxr ...
- VS---《在VS2010中 使用C++创建和使用DLL》(001)
VS---<在VS2010中 使用C++创建和使用DLL>(001) 需要学习制作和使用动态库,现在知道:DLL调用有两种方式,一种是静态调用,另外一种是动态调用.详细的还不算明白,等后期 ...
- python pip 'nonetype' object has no attribute 'bytes'
python pip 'nonetype' object has no attribute 'bytes' 更新 pip for Windows : python -m pip install -U ...