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. VirtualBox虚拟CentOS7共享文件夹

    在VirtualBox的centos虚拟机光盘设置为安装增强工具包VBoxGuestAdditions.iso 进入centos, cd /media mkdir cdrom mount -t iso ...

  2. Delphi 类的特性

  3. Python网络编程常用代码

    服务器端代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 # -*- coding: cp936 -*- ...

  4. STM32F407 CAN发送注意事项

    STM32使用的baseCAN,使用过程中发现一些注意的事项,特此记录. 现象: CAN发送程序,在1ms以上间隔调用时,一切正常. 当连续调用CAN发送程序4次或更多时,表现为丢数据,仅能发送一条或 ...

  5. 自己手写实现Dubbo

    目录 dubbo 简单介绍 为什么手写实现一下bubbo? 什么是RPC? 接口抽象 服务端实现 注册中心 消费者端: dubbo 简单介绍 dubbo 是阿里巴巴开源的一款分布式rpc框架. 为什么 ...

  6. HDU 4085 斯坦纳树+DP

    https://cn.vjudge.net/problem/HDU-4085 给你n,m,k ,分别表示有n个点,m条边,每条边有一个权值,表示修复这条边需要的代价 从前k个点中任取一个使其和后k个点 ...

  7. Ubuntu安装截图软件shutter

    参考链接: Ubuntu 安装和配置shutter截图软件 解决shutter不能编辑的问题:https://itsfoss.com/shutter-edit-button-disabled/ 安装前 ...

  8. ubuntu 中 搭建 C编程环境

    在 ubuntu 中 使用 快捷键 Ctrl + Alt + T 打开 终端 在终端输入 gcc 查看 有没有安装 gcc (c语言的编译器) ( 我这里是 已经 安装 好的 ) 进行 安装 gcc ...

  9. ubuntu nginx 启动多个Django项目

    1.将 /etc/nginx/sites-enabled/ 目录下的nginx默认配置文件default,重命名,例如:default1 2.给每个Django项目添加nginx.conf配置文件,建 ...

  10. excel操作之poi-ooxml

    目前市场上流行的对于excel处理的框架大致有两种:poi和jxl.对于这两种框架,我们可以做一个简单的对比:   1 开发团队:poi是Apache旗下的一个开源项目,由Apache官方维护,jxl ...