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文档 ...
随机推荐
- 使用cnpm淘宝镜像
选装cnpm 1.说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事. 2.官方网址:http://npm.ta ...
- list 字符串拼接效率实验
ist 字符串拼接有多种方法,我就其中常用三种做了实验,实验代码如下: 第一次是为了初始化静态方法,后面的才是效率比较. 结果如下: StringUtils join 方法用的是StringBuild ...
- CentOS7 PHP增加连接Sqlserver扩展
扩展插件下载地址 https://github.com/Microsoft/msphpsql/tags 本机PHP版本7.2,非线程安全 https://github.com/microsoft/ms ...
- vue 之this.$router.push、replace、go的区别
一.this.$router.push 说明:跳转到指定URL,向history栈添加一个新的记录,点击后退会返回至上一个页面 使用: this.$router.push('/index') this ...
- kafka无法消费数据提示找不到分区
1 原因 自己重建了kafka 但是只有一个分区 以前的offset没有重置,导致了消费的时候 找不到主题分区 手动删除之前的offset数据(mysql自定义配置)
- delphi Tidhttp 发送json格式报文
type TwmsThreadpostJson = class(TThread) private Furl: string; Fpostcmd: string; FResult: string; FB ...
- gitlab常用的命令
git checkout . #本地所有修改的.没有的提交的,都返回到原来的状态git stash #把所有没有提交的修改暂存到stash里面.可用git stash pop回复.git reset ...
- asp.net 各种文件解析探索
aspx ascx ashx 等等 准备写一个专题 还望各位批评指正,共同学习
- 微信小程序审核不通过的解决方法
前言 近来,微信小程序一直活跃在开发者的眼球中.很多开发者都投身微信小程序的开发中,而这些开发者,总是需要面对最后一道难题:如何以一种优雅的姿势来通过微信官方的审核.本文基于几天前提交审核的一次总结, ...
- eclipse调试断点
1.条件断点 如果你不知道如何添加断点,只需点击左边面板(行号前面)断点即被创建.在调试界面中,“断点”视图会把所有被创建的断点列出来.我们可以给它加一个布尔条件,也就是说,该断点会被激活并且如果布尔 ...