2015年12月14日

CSS3/SVG clip-path路径剪裁遮罩属性简介

摘要: 一、SVG属性和CSS3属性千丝万缕的关系CSS3新增属性除了我们现在用的比较多的border-radius,box-shadow,gradient,...之类,还有很重要的一个分支:SVG属性家族!所谓「SVG属性家族」是指原本SVG的标签属性可以直接使用CSS设置。比方说,之前介绍“SVG Sp... 阅读全文

posted @ 2015-12-14 15:20 大西瓜3721 阅读(1510) 评论(0) 推荐(0)

CSS和SVG中的剪切——clip-path属性和<clipPath>元素

摘要: CSS和SVG有很多共同之处。CSS有很多特性都是从SVG中引入过来的。其中就有“剪切”的特性。CSS和SVG都允许我们对一个元素进行非矩形的剪切。在这篇文章中,将介绍CSS和SVG中的剪切技术。特别声明:本文提供的DEMO可能在你的浏览器中不能正常的演示,你应该查看这个表格了解更多相关的信息。你在... 阅读全文

posted @ 2015-12-14 15:02 大西瓜3721 阅读(683) 评论(0) 推荐(0)

理解SVG坐标系统和变换: 建立新视窗

摘要: 在SVG绘制的任何一个时刻,你可以通过嵌套或者使用例如的元素来建立新的viewport和用户坐标系。在这篇文章中,我们将看一下我们如何这样做,以及这样做如何帮助我们控制SVG元素并让它们变得更加灵活(或流动)。这是SVG坐标系和变换系列的第三篇也是最后一篇文章。在第一篇中,包括了任何要理解SVG坐标... 阅读全文

posted @ 2015-12-14 14:08 大西瓜3721 阅读(315) 评论(0) 推荐(0)

理解SVG坐标系统和变换: transform属性

摘要: SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换。然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别。在这篇文章中我们讨论SVG的transform属性和CSS属性,包括如何使用,以及你必须知道的关于SVG坐标系变换的知识。这是我写的SVG坐... 阅读全文

posted @ 2015-12-14 14:07 大西瓜3721 阅读(693) 评论(0) 推荐(0)

理解SVG坐标系和变换:视窗,viewBox和preserveAspectRatio

摘要: SVG元素不像HTML元素一样由CSS盒模型管理。这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观。然而,一旦你理解了SVG坐标系和变换,操纵SVG会非常简单并且很有意义。本篇文章中我们将讨论控制SVG坐标系的最重要的三个属性:viewport,viewBox, 和preserveA... 阅读全文

posted @ 2015-12-14 14:06 大西瓜3721 阅读(599) 评论(0) 推荐(0)

Art-Directing SVG图像viewBox属性

摘要: Art-Directing SVG图像viewBox属性作者:彦子日期:2015-06-02点击:992svg译者注:根据Google Dev文档的解释,Art Direction在这篇文章中的概念是比较狭义的:“基于设备的特性改变的图像,即可以利用picture元素完成的art direction... 阅读全文

posted @ 2015-12-14 13:54 大西瓜3721 阅读(371) 评论(0) 推荐(0)

导航