html可以用坐标画svg图吗,HTML5如何使用SVG的方法示例
代码优化永远是程序员亘古不变的需求,而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环,既然是优化,那我们先来看看SVG图片都有哪些优势:
SVG 可被非常多的工具读取和修改(比如记事本)
SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
几个SVG图片小例子:
我们来看一下第三个分享图标的代码:
不了解SVG的同学现在一定一脸问号,就跟我第一次见他们一样,别着急,我们从基础看起。
什么是SVG?
SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真。此外SVG 是万维网联盟的标准,SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。
怎么使用?
在 HTML5 中,您能够将 SVG 元素直接嵌入 HTML 页面中,例如上面的那颗小红心:
SVG 代码也可以写在一个以.svg结尾的文件中,然后用、、、等标签插入网页。
CSS也可以使用svg
.logo {
background: url(logo.svg);
}
SVG 文件还可以转为 BASE64 编码,然后作为 Data URI 写入网页。
SVG的语法
1. 标签
SVG 代码都放在顶层标签之中。下面是一个例子。
的width属性和height属性,指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。除了相对单位,也可以采用绝对单位(单位:像素)。如果不指定这两个属性,SVG 图像默认大小是300像素(宽) x 150像素(高)。
如果只想展示 SVG 图像的一部分,就要指定viewBox属性。
属性的值有四个数字,分别是左上角的横坐标和纵坐标、视口的宽度和高度。上面代码中,SVG 图像是100像素宽 x 100像素高,viewBox属性指定视口从(50, 50)这个点开始。所以,实际看到的是右下角的四分之一圆。
注意,视口必须适配所在的空间。上面代码中,视口的大小是 50 x 50,由于 SVG 图像的大小是 100 x 100,所以视口会放大去适配 SVG 图像的大小,即放大了四倍。
如果不指定width属性和height属性,只指定viewBox属性,则相当于只给定 SVG 图像的长宽比。这时,SVG 图像的默认大小将等于所在的 HTML 元素的大小。
2. 标签
标签代表圆形。
上面的代码定义了三个圆。标签的cx、cy、r属性分别为横坐标、纵坐标和半径,单位为像素。坐标都是相对于画布的左上角原点。
class属性用来指定对应的 CSS 类。
.red {
fill: red;
}
.fancy {
fill: none;
stroke: black;
stroke-width: 3pt;
}
SVG 的 CSS 属性与网页元素有所不同。
fill:填充色
stroke:描边色
stroke-width:边框宽度
3. 标签
标签用来绘制直线。
上面代码中,标签的x1属性和y1属性,表示线段起点的横坐标和纵坐标;x2属性和y2属性,表示线段终点的横坐标和纵坐标;style属性表示线段的样式。
4. 标签
标签用于绘制一根折线。
的points属性指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。
5. 标签
标签用于绘制矩形。
的x属性和y属性,指定了矩形左上角端点的横坐标和纵坐标;width属性和height属性指定了矩形的宽度和高度(单位像素)。
6. 标签
标签用于绘制椭圆。
的cx属性和cy属性,指定了椭圆中心的横坐标和纵坐标(单位像素);rx属性和ry属性,指定了椭圆横向轴和纵向轴的半径(单位像素)。
7. 标签
标签用于绘制多边形。
的points属性指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。
8. 标签
标签用于制路径。
的d属性表示绘制顺序,它的值是一个长字符串,每个字母表示一个绘制动作,后面跟着坐标。
M:移动到(moveto)
L:画直线到(lineto)
Z:闭合路径
9. 标签
标签用于绘制文本。
肆客足球
的x属性和y属性,表示文本区块基线(baseline)起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。
10. 标签
标签用于复制一个形状。
的href属性指定所要复制的节点,x属性和y属性是左上角的坐标。另外,还可以指定width和height坐标。
11. 标签
标签用于将多个形状组成一个组(group),方便复用。
圆形
12. 标签
标签用于自定义形状,它内部的代码不会显示,仅供引用。
圆形
13. 标签
标签用于自定义一个形状,该形状可以被引用来平铺一个区域。
上面代码中,标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示的宽度和长度是实际的像素值。然后,指定这个模式去填充下面的矩形。
14. 标签
标签用于插入图片文件。
width="50%" height="50%"/>
上面代码中,的xlink:href属性表示图像的来源。
15. 标签
标签用于产生动画效果。
上面代码中,矩形会不断移动,产生动画效果。
的属性含义如下。
attributeName:发生动画效果的属性名。
from:单次动画的初始值。
to:单次动画的结束值。
dur:单次动画的持续时间。
repeatCount:动画的循环模式。
可以在多个属性上面定义动画。
16. 标签
标签对 CSS 的transform属性不起作用,如果需要变形,就要使用标签。
上面代码中,的效果为旋转(rotate),这时from和to属性值有三个数字,第一个数字是角度值,第二个值和第三个值是旋转中心的坐标。from="0 200 200"表示开始时,角度为0,围绕(200, 200)开始旋转;to="360 400 400"表示结束时,角度为360,围绕(400, 400)旋转。
JavaScript 操作SVG
1. DOM操作
如果 SVG 代码直接写在 HTML 网页之中,它就成为网页 DOM 的一部分,可以直接用 DOM 操作。
id="mysvg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 800 600"
preserveAspectRatio="xMidYMid meet"
>
上面代码插入网页之后,就可以用 CSS 定制样式。
circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
circle:hover {
stroke: #090;
fill: #f8f8f8;
}
然后,可以用 JavaScript 代码操作 SVG。
var mycircle = document.getElementById('mycircle');
mycircle.addEventListener('click', function(e) {
console.log('circle clicked - enlarging');
mycircle.setAttribute('r', 60);
}, false);
上面代码指定,如果点击图形,就改写circle元素的r属性。
2. 获取 SVG DOM
使用、、标签插入 SVG 文件,可以获取 SVG DOM。
var svgObject = document.getElementById('object').contentDocument;
var svgIframe = document.getElementById('iframe').contentDocument;
var svgEmbed = document.getElementById('embed').getSVGDocument();
注意,如果使用标签插入 SVG 文件,就无法获取 SVG DOM。
3. 读取 SVG 源码
由于 SVG 文件就是一段 XML 文本,因此可以通过读取 XML 代码的方式,读取 SVG 源码。
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve" width="500" height="440"
>
使用XMLSerializer实例的serializeToString()方法,获取 SVG 元素的代码。
var svgString = new XMLSerializer()
.serializeToString(document.querySelector('svg'));
4. SVG 图像转为 Canvas 图像
首先,需要新建一个Image对象,将 SVG 图像指定到该Image对象的src属性。
var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var DOMURL = self.URL || self.webkitURL || self;
var url = DOMURL.createObjectURL(svg);
img.src = url;
然后,当图像加载完成后,再将它绘制到元素。
img.onload = function () {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
};
小结
SVG能做的远不止这些,利用SVG做的动画效果,文字效果我们以后给大家详细讲解,今天就先到这里吧。
console.log('右下角点好看呦')
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html可以用坐标画svg图吗,HTML5如何使用SVG的方法示例相关推荐
- 将PPT中画的图转成eps格式的有效方法
将PPT中画的图转成eps格式的有效方法 一.引言 写学术论文的时候,不少同学还在使用位图(jpg, png,bmp),然而我们更希望使用失量图,这样生成的pdf最终稿以后可以无限放大,也不会失真.对 ...
- html中svg的css,HTML5 内联 SVG
什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...
- Unity 画折线图
此处的 unity 版本为 5.6 ,不同的的版本,有些API可能不一样 Unity 在不使用第三方插件的前提下画折线图,目前比较好用的方法是用 Unity 自带的 LineRenderer 组件,别 ...
- AI绘图实战(十):制作线稿矢量图之包头巾的女人,画矢量图/生成矢量图/导出矢量图/直出svg/vector studio插件使用 | Stable Diffusion成为设计师生产力工具
S:AI能取代设计师么? I :至少在设计行业,目前AI扮演的主要角色还是超级工具,要顶替?除非甲方对设计效果无所畏惧~~ 预先学习: 安装及其问题解决参考:<Windows安装Stable D ...
- vue中使用svg画路径图
效果图: html <svg class="svgClass" xmlns="http://www.w3.org/2000/svg" version=& ...
- python画矢量图_科学网—Python绘制可插入Word的高清矢量图(SVG转EMF) - 任晓东的博文...
Python具有强大的绘图功能.在科学论文中通常需要矢量图,而且如果能方便的插入到word中更好.Python中自带的绘图库matplotlib可以将图保存成svg格式,但是我通常喜欢使用emf的矢量 ...
- Android矢量图动画特效,Android使用SVG矢量图打造酷炫动画效果
一个真正Android使用SVG矢量图打造酷炫动效往往让人虎躯一震,话不多说,咱们先看看效果: 这个效果我们需要考虑以下几个问题: 1. 这是图片还是文字: 2. 如果是图片该如何拿到图形的边沿线坐标 ...
- 能带曲线图绘制python_如何使用python的matplotlib模块画折线图
python是个很有趣的语言,可以在cmd命令窗口运行,还有很多的功能强大的模块.这篇经验告诉你,如何利用python的matplotlib模块画图. 工具/原料 windows系统电脑一台 pyth ...
- 用计算机画函数图像教案,信息技术应用 用计算机画函数图象教案1
谭诗环 地区: 四川省 - 绵阳市 - 安 县 学校:安县黄土镇仁和学校 共1课时 信息技术应用 用计算机画函数图象">信息技术应用 用计算机- 初中数学 人教2011课标 ...
最新文章
- android源代码居中字体,Android (布局优化) TextView实现drawable图标大小 位置与第一行文本居中...
- 微软学者 | 郭达雅:瞄准科研目标主动出击,挑战“不可思议”
- 键盘上每个键作用!!!
- 七段液晶数字识别-处理程序
- java 网络通信协议_JAVA-基础-网络通信协议
- 一个小游戏Digger for .NET!
- JavaEE 要懂的小事:一、图解Http协议
- 模板方法模式(TemplateMethod) 简介
- opengl加载显示3D模型lxo类型文件
- Python的re.match()和re.search()的使用和区别
- bind merge r 和join_[R] 制作梅西和C罗进球数的quot;追赶动画quot; - ggplot2 + gifski
- javascript-定时器的使用
- [LeetCode] 342. Power of Four(位操作)
- 系统无法安装High Definition Audio的UAA总线驱动程序之解决方法
- 手机安装证书时候弹出输入证书密码
- Odin WindowEditor使用体会
- 攻防世界crypto部分sherlock的writeup,原来不是培根密码。
- PayPal提现银行不给入账要退回?最新解决方法如下!!!
- Android能装到电脑上吗,怎么在电脑上装安卓系统
- Incorrect string value '\xF0\xA0\x9D\xB9\xE5\x82...' for column 'CONTENT' at row 1
热门文章
- 在SQL Server中使用architectureid
- SpringBoot项目从Git拉取代码并完成编译打包启动的sh自动脚本
- [GO]结构体成员的使用:普通变量
- FZEasyFile的使用
- 原DTCoreText学习(三)-自定义DTAttributedTextCell
- .NET中获取字符串的MD5码
- 自拍会不会被大数据_不会搭建大数据平台,我被老板优化了...
- hive的row_number()函数
- Unity 3D 中NGUI插件设置中文label
- 结对项目--地铁出行路线规划程序(续)——附加题