最近做一个流程图绘制项目,所以研究了一下svg.发现svg目前浏览器支持的挺强大的,但是svg本身有很多背景知识和元素属性以及js库等,如何系统地掌握这一强大工具呢? viewPort(视窗)和viewBox(视野) 这两个词的翻译还是比较好的!你站在屋子里通过窗户来看外面的世界.窗户的大小是固定的,比如是400*200,可外面的世界是无限大的!那是不是你就只能看到窗户大小般的世界和井底之蛙一般呢?如果真是这样,那viewBox就没用了.想想看,如果你里窗户越远,是不是看到的越多呢?当你和窗户津

今天周六,原则上要休息,但想到下周还有一堆任务,还是先做一部分工作吧,就把之前做的票面设计器改了改,增加了上传图片和更换背景底图的功能.现在打算整理下这个设计器,也算对齐一个总结.不过这属于我们部门的产品,代码我使用截图的方式多一些.首先来看一下我做的这个票面设计器的最终效果图: 从截图中可以看到在页面里,专业点叫我在画布里增加了很多的元素,这些元素都与剧院票务相关包括项目.场次.地点,二维码等信息.上面的word截图是我今天做的功能,背景图我也换成了自定义的图片.光看这个页面其实不难做,因为页

在了解SVG坐标系统之前,要先熟悉三个概念: SVG中 世界,视野(viewbox),视窗(viewport). SVG中的世界就是一个无限大的画布,我们可以在上面画任何东西.因为在svg元素中,我们可以写任意的代码,绘制无数的图形.代码的数量,是由你决定的, 你想写多少就写多少,无数的图形肯定是无限大. 视窗(viewport),则是浏览器要显示多大的区域,开辟多大的空间来渲染我们绘制的图形,也就是我们想要展示了出来哪一部分内容给用户看.我们在写svg元素的时候,都会指定宽度和高度,如<svg

前面的话 给SVG元素应用填充和描边,除了使用纯色外,还可以使用渐变.本文将详细介绍SVG渐变 线性渐变 有两种类型的渐变:线性渐变和径向渐变.必须给渐变内容指定一个id属性,否则文档内的其他元素不能引用它.为了让渐变能被重复使用,渐变内容需要定义在<defs>标签内部,而不是定义在形状上面 线性渐变沿着直线改变颜色,要插入一个线性渐变,需要在SVG文件的defs元素内部,创建一个<linearGradient> 节点 <svg height="70" v

一.SVG技术背景 随着网络上信息数据的大量涌现,如何正确显示和出版是有效传输.接收和利用它们的基础.图形.图像是信息数据可视化的主要方式.但现有的图形.图像格式存在着缺陷:非开放式,显示和印刷质量及适应性差,难以创建Web上图文信息的个性化定制.交互式以及实时动态方面的应用等.SVG正是在这样的背景下诞生的. SVG(Scalable Vector Graphics,可伸缩性矢量图形)是由万维网联盟(W3C)推出的基于XML编码的开放式图形.图像标准.它虽然是一种二维矢量图形格式,但其中可以包

20 个有用的 SVG 工具,提供更好的图像处理 SVG 现正在 Web 设计领域变得越发流行, 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像. 但当进行 Web 设计时,我们还需要做一些优化来使得 SVG 变得更加轻量. 下面介绍的 20 个工具,可以帮助你快速有效的创建 SVG 图像.现有的在线工具已经可以帮助我们进行优化.转换.新建模式等工作. 更详细的介绍,参见:How To Create SVG Animation Using CSS 交互式 SVG

给SVG元素应用填充和描边有三种方法(戳这里学习SVG填充和描边的相关内容).你可以使用纯色.图案或渐变.前面两种方法我们之前已经讲过了,现在我们来讨论第三种方法——渐变. SVG提供了两种渐变——线性.径向.我今天先讲线性渐变,下篇我们再看看径向渐变. SVG线性渐变 如果你看过这系列的SVG之前的文章,你应该对这里渐变的很多概念都比较熟悉啦.在<defs>中定义,然后在后面把它们作为填充或描边来引用. 我们使用<linearGradient>元素来定义线性渐变.我们从一个简单的

SVG和canvas中是一样的,都是使用标准的HTML/CSS中的颜色表示方法,这些颜色都可以用于fill和stroke属性. 基本有下面这些定义颜色的方式: 1. 颜色名字: 直接使用颜色名字red, blue, black… 2. rgba/rgb值: 这个也很好理解,例如#ff0000,rgba(255,100,100,0.5). 3. 十六进制值: 用十六进制定义的颜色,例如#ffffff. 4. 渐变值:这个也与canvas中一样,支持两种渐变色:线性渐变,环形渐变.如下图所示:  5

SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换.然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别.在这篇文章中我们讨论SVG的transform属性和CSS属性,包括如何使用,以及你必须知道的关于SVG坐标系变换的知识. 这是我写的SVG坐标系统和变换部分的第二篇.在第一篇中,包括了任何要理解SVG坐标系统基础的需要知道的内容:更具体的是, SVG viewport, viewBox 和 preserveAspectRatio 属性.