摘要:标签标签用于将多个形状组成一个组,方便复用。表示的宽度和长度是实际的像素值。标签标签对的属性不起作用,如果需要变形,就要使用标签。注意,如果使用标签插入文件,就无法获取。
代码优化永远是程序员亘古不变的需求,而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环,既然是优化,那我们先来看看SVG图片都有哪些优势:
SVG 可被非常多的工具读取和修改(比如记事本)
SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
不了解SVG的同学现在一定一脸问号,就跟我第一次见他们一样,别着急,我们从基础看起。
什么是SVG?SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真。此外SVG 是万维网联盟的标准,SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。
怎么使用?在 HTML5 中,您能够将 SVG 元素直接嵌入 HTML 页面中,例如上面的那颗小红心:
SVG 代码也可以写在一个以.svg结尾的文件中,然后用
的width属性和height属性,指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。除了相对单位,也可以采用绝对单位(单位:像素)。如果不指定这两个属性,SVG 图像默认大小是300像素(宽) x 150像素(高)。 如果只想展示 SVG 图像的一部分,就要指定viewBox属性。 注意,视口必须适配所在的空间。上面代码中,视口的大小是 50 x 50,由于 SVG 图像的大小是 100 x 100,所以视口会放大去适配 SVG 图像的大小,即放大了四倍。 如果不指定width属性和height属性,只指定viewBox属性,则相当于只给定 SVG 图像的长宽比。这时,SVG 图像的默认大小将等于所在的 HTML 元素的大小。 2. 上面的代码定义了三个圆。 class属性用来指定对应的 CSS 类。 SVG 的 CSS 属性与网页元素有所不同。 fill:填充色 3. 上面代码中, 4. 5. 6. 7. 8. M:移动到(moveto) 10. 标签 的href属性指定所要复制的节点,x属性和y属性是左上角的坐标。另外,还可以指定width和height坐标。 11. 12. 13. 上面代码中, 14. 上面代码中, 15. 上面代码中,矩形会不断移动,产生动画效果。 attributeName:发生动画效果的属性名。 16. 上面代码中, 1. DOM操作 上面代码插入网页之后,就可以用 CSS 定制样式。 然后,可以用 JavaScript 代码操作 SVG。 上面代码指定,如果点击图形,就改写circle元素的r属性。 2. 获取 SVG DOM 注意,如果使用标签插入 SVG 文件,就无法获取 SVG DOM。 3. 读取 SVG 源码 使用XMLSerializer实例的serializeToString()方法,获取 SVG 元素的代码。 4. SVG 图像转为 Canvas 图像 然后,当图像加载完成后,再将它绘制到元素。 SVG能做的远不止这些,利用SVG做的动画效果,文字效果我们以后给大家详细讲解,今天就先到这里吧。 肆客足球 最新最全的足球资讯,最火爆的球迷社区,直播中超、欧洲赛事,全面丰富的数据统计,还有球星推特、Ins、社交动态,原汁原味,扫描下方二维码即可下载.red {
fill: red;
}
.fancy {
fill: none;
stroke: black;
stroke-width: 3pt;
}
stroke:描边色
stroke-width:边框宽度
L:画直线到(lineto)
Z:闭合路径
9.
标签用于复制一个形状。
from:单次动画的初始值。
to:单次动画的结束值。
dur:单次动画的持续时间。
repeatCount:动画的循环模式。
可以在多个属性上面定义动画。
如果 SVG 代码直接写在 HTML 网页之中,它就成为网页 DOM 的一部分,可以直接用 DOM 操作。circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
circle:hover {
stroke: #090;
fill: #f8f8f8;
}
var mycircle = document.getElementById("mycircle");
mycircle.addEventListener("click", function(e) {
console.log("circle clicked - enlarging");
mycircle.setAttribute("r", 60);
}, false);
使用、、标签插入 SVG 文件,可以获取 SVG DOM。
var svgObject = document.getElementById("object").contentDocument;
var svgIframe = document.getElementById("iframe").contentDocument;
var svgEmbed = document.getElementById("embed").getSVGDocument();
由于 SVG 文件就是一段 XML 文本,因此可以通过读取 XML 代码的方式,读取 SVG 源码。var svgString = new XMLSerializer()
.serializeToString(document.querySelector("svg"));
首先,需要新建一个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);
};
小结
console.log("右下角点好看呦")
技术放肆聊QQ群:617413307 欢迎程序员朋友积极加群,共同进步
技术放肆聊公众号,每日干货,最前沿的技术知识,扫描下方二维码关注:
推一下自家APP
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/100924.html
摘要:前端面试题总结持续更新中为什么只需要写需要来规范浏览器的行为让浏览器按照它们应该的方式来运行基于所以需要对进行引用,才能告知浏览器文档所使用的文档类型。 前端面试题总结——H5(持续更新中) 1.HTML5 为什么只需要写 ? HTML5 需要doctype来规范浏览器的行为,让浏览器按照它们应该的方式来运行; HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档...
摘要:前端面试每日题,以面试题来驱动学习,每天进步一点让努力成为一种习惯,让奋斗成为一种享受相信坚持的力量学习不打烊,充电加油只为遇到更好的自己,天无节假日,每天早上点纯手工发布面试题死磕自己,愉悦大家。 《论语》,曾子曰:吾日三省吾身(我每天多次反省自己)。 前端面试每日3+1题,以面试题来驱动学习,每天进步一点! 让努力成为一种习惯,让奋斗成为一种享受!相信 坚持 的力量!!! ...
阅读 3309·2021-11-23 09:51
阅读 2417·2021-11-09 09:46
阅读 1463·2019-08-30 15:54
阅读 3104·2019-08-30 14:22
阅读 2901·2019-08-29 12:40
阅读 1619·2019-08-26 10:33
阅读 1764·2019-08-23 17:09
阅读 1541·2019-08-23 16:11