SVG 基本绘图方法总结
基本内容:
* SVG并不属于HTML5专有内容
* HTML5提供有关SVG原生的内容
* 在HTML5出现之前,就有SVG内容
* SVG,简单来说就是矢量图
* SVG文件的扩展名为".svg"
* SVG使用的是XML语法
一、概念:
* SVG是一种使用XML技术描述二维图形的语言
* SVG特点
* SVG绘制图形可以被搜索引擎抓取
* SVG在图片质量不下降的情况下,被放大
* SVG与Canvas的区别
* SVG
* 不依赖分辨率
* 支持事件绑定
* 大型渲染区域的程序(例如百度地图)
* 不能用来实现网页游戏
* Canvas
* 依赖分辨率
* 不支持事件绑定
* 最合适网页游戏
* 保存为".jpg"格式的图片
* SVG用途
* 网页中一些小的图标
* 网页中动态特效(动画效果)
SVG 文件示例
1 <?xml version="1.0" encoding="utf-8" ?> 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 3 <svg width="100%" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> 4 <rect x="100" y="100" width="300" height="100" fill="blue" troke="black" 5 stroke-width="4"/> 6 </svg>
二、HTML5中使用SVG
* 使用<svg></svg>元素
* 作用 - 类似于<canvas>元素
* 默认大小为 300px*150px
* 使用CSS样式
* 使用SVG绘制图形,必须定义<svg>中
示例:
1 <svg width="100%" height="300"> 2 <rect x="100" y="100" width="300" height="100" fill="blue" troke="black" stroke-width="4"/> 3 </svg>
三、绘制图形
1. 矩形元素
<rect x="" y="" width="" height="" />
2. 圆型元素
<circle cx="" cy="" r="" />
3. 椭圆元素
<ellipse cx="" cy="" rx="" ry="">
4. 直线元素
<line x1="" y1="" x2="" y2="" />
5. 折线元素
<polyline points="">
6. 多边形元素
<polygon points="" />
示例:
1 <!-- 2 在HTML页面中使用svg标签的话 3 * 定义<svg></svg>元素 4 * 类似于<canvas>元素的作用 5 * 默认大小 300px * 150px 6 * 设置宽度和高度 - 属性和style 7 * 利用svg绘制所有图形,必须定义在<svg>元素内 8 * 利用svg绘制的图形是与HTML页面有关的 9 --> 10 <!-- <svg style="background:pink;width:400px;height:400px;"> --> 11 <!-- 12 绘制矩形 - <rect /> 13 * x和y - 绘制矩形的左上角坐标值 14 * width和height - 绘制矩形的宽度和高度 15 * 必须使用属性方式,不能使用style样式方式 16 * 默认颜色为黑色 17 设置颜色 - 既可以使用属性,还可以使用样式 18 * fill - 设置填充颜色 19 * stroke - 设置描边颜色 20 设置线条宽度 21 * stroke-width 22 注意 23 * svg绘制的图形,使用style方式设置样式,使用的不是CSS属性,而是SVG属性 24 --> 25 <rect x="10" y="10" width="100" height="100" fill="blue" stroke="black" stroke-width="5" /> 26 27 <!-- 28 绘制圆形 - <circle> 29 * cx和cy - 圆形的圆形坐标值 30 * r - 圆形的半径 31 --> 32 <circle cx="100" cy="100" r="100" fill="pink" /> 33 34 <!-- SVG绘制椭圆 --> 35 <ellipse cx="150" cy="150" rx="150" ry="100" /> 36 37 <!-- SVG绘制线条 --> 38 <line x1="10" y1="10" x2="200" y2="200" stroke-width="10" stroke="black"/> 39 <line x1="200" y1="200" x2="200" y2="10" stroke-width="10" stroke="black"/> 40 41 <!-- SVG绘制折线 --> 42 <polyline points="10,10 200,10 200,200 10,200 100,100 10,10" stroke-width="5" stroke="black" fill="white"/> 43 44 <!-- SVG绘制多边形 --> 45 <polygon points="10,10 200,10 200,200 10,200 100,100 10,10" stroke-width="5" stroke="black" fill="white" />
View Code
四、特效元素
1. 渐变 - 渐变元素定义在<defs>元素内
* 线性渐变 - <linearGradient>
* 该元素是起始元素
<linearGradient x1="%" y1="%" x2="%" y2="%">
<stop offset="%" stop-color="color" />
</linearGradient>
* 扇形(射线)渐变 - <radialGradient>
2. 滤镜 - 高斯模糊
* 滤镜使用<filter>元素
* <feGaussianBlur>元素 - 高斯模糊
* in="SourceGraphic"
* stdDeviation - 设置模糊程度
* 注意 - 定义在<defs>元素中
1 <!-- SVG线性渐变 --> 2 <svg width="400px" height="400px"> 3 <!-- 4 设置线型渐变 - <linearGradient> 5 * 用法 - 将渐变定义在<defs>元素中 6 * 特点 - 具有基准线 7 * 起点坐标值 - x1和y1 8 * 终点坐标值 - x2和y2 9 * 注意 10 * 该元素是起始元素 11 <linearGradient></linearGradient> 12 * x1和y1、x2和y2的值都是百分值 13 * 定义id属性 14 * 用于将设置的渐变添加到绘制的图形元素中 15 * 使用<stop>元素 - 设置渐变的颜色 16 * offset - 设置渐变颜色的位置 17 * 该值也是百分值 18 * stop-color - 设置渐变颜色 19 * stop-opacity - 设置渐变颜色的透明度 20 --> 21 <defs> 22 <linearGradient id="mygrd" x1="0" y1="0" x2="100%" y2="100%"> 23 <stop offset="0" stop-color="red" /> 24 <stop offset="50%" stop-color="green" /> 25 <stop offset="100%" stop-color="blue" /> 26 </linearGradient> 27 </defs> 28 <!-- 29 如何可以将上面设置线型渐变,添加在下面的矩形中? 30 * 使用fill属性,值为url(#渐变元素的id值) 31 --> 32 <rect x="0" y="0" width="400" height="400" fill="url(#mygrd)" /> 33 </svg> 34 <!-- SVG高斯模糊 --> 35 <svg width="500px" height="500px"> 36 <!-- 37 如何设置高斯模糊滤镜 38 * 定义<defs></defs>元素 - 滤镜定义在该元素中 39 * 定义<filter></filter>元素 - 表示SVG的滤镜 40 * 定义高斯模糊元素<feGaussianBlur> 41 * 属性 42 * in="SourceGraphic" - 固定写法 43 * stdDeviation - 设置模糊程度 44 * 为<filter>元素定义id属性值 45 * 方便添加在绘制图形的元素中 46 --> 47 <defs> 48 <filter id="myfilter"> 49 <feGaussianBlur in="SourceGraphic" stdDeviation=5 /> 50 </filter> 51 </defs> 52 <!-- 53 如何将上面的高斯模糊与下面的元素进行关联 54 * 使用filter属性,值为url(#id) 55 * 设置当前图形的滤镜 56 --> 57 <rect x="100" y="100" width="100" height="100" filter="url(#myfilter)" fill="green" /> 58 </svg>
View Code
老师的题外话:
* 实际开发中
* 多用SVG
* 不失真
* 可被搜索
* 页面优化 - 减少外部链接
* <a href="">
* <img src="">
* Canvas - HTML绘制图形
* 实际运行中,是以图片方式出现(.png)
* 不能被搜索引擎抓取
* 放大后失真
* SVG内容
* 内容量非常大
* 静态绘制图形
* 动态动画效果
* 专门提供事件
* 网上关于SVG的资料很少(没有书籍)
* SVG的规范(W3C英文)
* SVG或CANVAS在HTML页面中定义
* 是只能定义一个元素,还是可以定义多个元素?
* 在一个HTML页面可以定义多个<svg>或<canvas>元素
* SVG还是CANVAS都是允许同时定义(绘制)多个图形
* 在实际开发中的使用
* SVG在将来的工作开发,使用率并不高
* SVG图片一般都是由UI设计师来完成
* SVG即使是我们自己来设计(绘制)
* 目前网络上很多专门提供现成的SVG图片的网站
* 使用JS库
转载于:https://www.cnblogs.com/Medeor/p/4960512.html
SVG 基本绘图方法总结相关推荐
- python绘制剖面图_干货!告诉你详细的剖面图绘图方法和步骤
首先,我们总结一下制图7步: 01.分析图纸剖面图首先要进行分析,分析已知条件和图纸,方便进行体块的拆解,接下来才能开始进入绘制阶段. 02.定位绘制从定位开始,所有绘制出来的图样,都需要对它们进行定 ...
- Java Graphics2D类的绘图方法
Java语言在Graphics类提供绘制各种基本的几何图形的基础上,扩展Graphics类提供一个Graphics2D类,它拥用更强大的二维图形处理能力,提供.坐标转换.颜色管理以及文字布局等更精确的 ...
- Java Graphics类的绘图方法
Graphics类提供基本绘图方法,Graphics2D类提供更强大的绘图能力.本节讲解Graphics类,下节讲解Graphics2D. Graphics类提供基本的几何图形绘制方法,主要有:画线段 ...
- js svg语音波动动画_让动效更酷炫!4 个常见且常用的 SVG 交互动画方法
本文介绍了 4 种常见的 SVG 交互动画方法,帮你了解 SVG 交互动画的原理和简单方法. 优秀的人机交互和舒适合理的动画,一直是 UX 设计师孜孜不倦追求的目标.但 UX 设计师每天都遇到能做出效 ...
- php arcode svg,在react中使用svg的各种方法总结(附代码)
这篇文章给大家介绍的内容是关于在react中使用svg的各种方法总结(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 优势 SVG可被非常多的工具读取和修改(比如vscode ...
- java的graphics2d_Java Graphics2D类的绘图方法
Java Graphics2D类的绘图方法 Java语言在Graphics类提供绘制基本的几何图形的基础上,扩展Graphics类提供一个Graphics2D类,它拥用强大的二维图形处理能力,提供.坐 ...
- 怎么用class引入svg_让动效更酷炫!4 个常见且常用的 SVG 交互动画方法
本文介绍了 4 种常见的 SVG 交互动画方法,帮你了解 SVG 交互动画的原理和简单方法. 优秀的人机交互和舒适合理的动画,一直是 UX 设计师孜孜不倦追求的目标.但 UX 设计师每天都遇到能做出效 ...
- 【Java】绘图入门和机制,绘图方法演示(绘制坦克)
目录 1.绘图入门(绘制一个圆) 2.绘图方法 1.//画直线 2.//画矩形边框 3.//画椭圆边框 4.//填充矩形 (设置画笔的颜色) 5.//填充椭圆 6.//画图片 7.//画字符串 3.绘 ...
- iOS 显示SVG文件的方法
iOS 显示SVG文件的方法 1. Swift iOS : 显示SVG文件的方法 SVG文件是矢量图标准之一,特点是可以缩放,并且可以用可以阅读的源代码的方式(而不是二进制)来存储图形信息.比如如下文 ...
最新文章
- JNDI数据库连接池的配置
- SpringBoot+Redis环境搭建
- TCP/IP的基本介绍
- 网狐棋牌(四) TimerEngine
- apache hive_Hive:使用Apache Hive查询客户最喜欢的搜索查询和产品视图计数
- 普通二本的辛酸Android面试之路,算法太TM重要了
- java 覆盖和隐藏_Java方法的覆盖与隐藏的区别分析
- io口模拟串口 1602显示数据位内容[转]
- ROS入门-16.tf坐标系广播与监听的编程实现
- 利用爬虫大量抓取网页图片
- python标注cad桩位_如何在图纸上作出桩位坐标及大量编号
- Epson爱普生L3100 L3101 L3110 L3150 L3168系列清零软件废墨清零软件+教程
- 视觉SLAM总结-本质矩阵E分解
- 360校招 求立方体表面积
- git 公钥配置时问题解决记录
- 2022/2/3 四舍五入 分数化简 高精度运算
- 微信小程序开发—背景图片全屏(无白条)
- 三极管放大电路参数计算
- 图数据库初探——7. 以红楼梦数据集为例进行Nebula Graph使用
- Ristretto 简介: 一个高性能GO缓存