SVG

优雅的轮廓与 SVG paint-order

SVG 渲染使用 painter 的模型来描述图像如何渲染到屏幕。像墙上的油漆层,上层的内容遮盖下层的内容。SVG 规范定义了哪些内容会绘制在其他内容之上。每个形状的不同部分 —— stokefillmarker —— 每个都创建绘制层。这些形状绘制在其他层之上,层的顺序就是他们在文档中被定义的顺序。两个新的属性被引入 SVG2 规范,他们是 z-indexpaint-order,允许你改变渲染规则。

SVG之旅:SVG的图层和渲染顺序

不管是在制图软件中还是Web页面的DOM元素,都有层的概念。在制图软件中,大家比较熟悉,能非常的清晰的看出图层的概念。而在Web页面中,特别是我们熟悉的HTML的DOM中,其实他也有层的概念。不同的是制图软件可以用鼠标拖动图层来改变层次,而DOM中需要依赖于CSS的z-index属性来控制他的层次关系。其实在SVG中,他也有层和渲染顺序的概念。今天我们就来看看SVG中的图层和渲染顺序相关的知识。

SVG之旅:SVG简介

自从2014年开始陆陆续续的开始就在接触SVG。但由于自身的原因,并没有对SVG进行系统化的学习,在实际的工作项目中并未真正的使用SVG相关的技术。为了储备相关的知识,并尝试在项目中使用SVG,有必要对该技术进行系统化的梳理和学习。所以开始每周会抽出大半的时间来学习和整理SVG相关的知识,希望在几个月后,这方面的技术有所突破。

编写 SVG 的指南

Scalable Vector Graphics (SVG)是在XML中描述二维图形的语言。这些图形由路径,图片和(或)文本组成,并能够在不失真的情况下任意变换尺寸。本书主要介绍了内联SVG,它是指在HTML中编写的嵌入式代码,以便在浏览器中生成这些图形。以这种方式使用SVG有许多优点,包括为了交互目的访问所有图形的各个部分,支持访问 SVG 文档构成的 DOM 节点树,查询、修改 DOM 节点的属性,提升用户可访问性。先介绍基本组织和简单形状,再继续描述SVG坐标系或画布,然后用它绘制图形的内部和/或边框,变换,以及使用和操作图形文本。通过渐变和模式等更高级的功能来总结。这个指南快速且详细的介绍内联式SVG以及所有涵盖的可使用的功能,有助于你学习SVG。 它面向设计师和开发人员,希望以最可行的方式将SVG添加到他们的工作流程中。

从小笔画细节到开始使用手工制作的模式,本指南旨在成为一个围绕“go-to”编写SVG的参考。

SVG应用指南

我们处于一个用像素来作为度量衡的互联网世界中。 对于一名在互联网世界中工作的设计师和开发者来说, 像素对于我们来说亦敌亦友。 我们希望自己创作出的Web中每一张图片、每一像素都能棱角分明(如网站中的logoicon以及任何修饰性的图片),清晰的在任何设备上展现给用户的同时, 也能尽可能的保证图片的体积来优化性能。而SVG就是解决上面问题非常棒的一个方案。SVG 意为可缩放矢量图形(Scalable Vector Graphics)与屏幕分辨率无关, 体积上能使用Gzip的方式压缩, 而且修改编辑都很方便。本文是SVG在Web开发中一些常见的应用场景、技巧以及使用方法的一个简单的入门指南。

不炫技,SVG+CSS3 旋转动画属性就能实现的梦幻效果

CSS3的动画相关的基础的属性基本都涉猎过了,个人认为,其中最复杂的是d:path()路径变形动画,超过3D,而位移、轨迹、旋转、缩放、斜切什么的,相对简单一些,但作为非动画设计师而言,灵活的掌握这些基本的动画加以无穷无尽的变换,就已经能做出很多华丽丽的效果了,这篇呢,源于做一个练习时,AI的连续旋转复制功能,试着做了几个动效,简单、省时、高效,最主要的是用到CSS3的transform:rotate()旋转属性,辅以位移和缩放。

一起画只百度熊吧

如果你也喜欢萌萌的百度熊,如果你也喜欢SVG,如果你也喜欢动画,那一起动手来写写这个Demo。看看如何使用SVG写一个会动的,萌萌的百度熊

纯SVG实现进度圈

进度圈(Progress Circles)是经典的仪表盘元素,可以将统计数据直观地展现为摘要视图。我们可以通过JavaScript和Canvas渲染,再配合CSS,图片或者利用SVG实现一个进度圈。使用SVG实现一个进度圈并没有想象中那么难,我们先从基本的开始。

SVG元素上的transform

同HTML元素一样,我们可以通过transform函数操作SVG元素。然而transform在SVG元素和HTML元素上的工作方式会有一些差别。首先,IE不支持SVG元素的CSS transform属性,但是如果只是应用一些2D变换,为了适配IE,我们可以使用SVG的transform属性。SVG的transform属性中的所有函数的参数只能是纯数字,比如说,我们不能在translate函数中使用%单位(虽说在火狐浏览器中的CSS transform属性也不能使用—此处有链接—),rotateskew角度只能使用deg单位,我们能在CSS transform属性中可以使用的所有其它单位在这里都不能使用。

HTML元素上的SVG滤镜

上周看到有一篇关于CSS滤镜效果函数的文章,其中的效果函数相对来说比较容易理解,而且上手难度低。但是,这种方式仅仅是添加CSS滤镜效果众多方式中最弱的一种。今天让我们来看一看滤镜基元,这是为图片和元素添加滤镜效果另外一种更加强大的方法。

页面

返回顶部