SVG

SVG基础——如何创建简单的图形和线条

上周我开始了SVG的系列探讨,并通过不同的方法将SVG嵌入到HTML页面中。因为需要让示例能够在你的屏幕上显示,所以我创建了一个绿色的矩形。创建矩形的代码并不难理解,我并不打算详细讲解,所以现在来讲一下你能够创建的其它形状吧。我之前有大概介绍了一些简单的SVG图形,但是我觉得我还是需要把它们再过一遍,因为我之前理解得也不够全面,所以再复习一遍也可以帮助我更好地理解。

SVG文件:从Illustrator导文件到Web

可缩放矢量图形(SVG)是早在1998年就已经有的一种矢量图像格式。它总是和Web一起发展,但是直到现在才开始赶上Web发展的步伐。如今我们已经不能否认SVG和Web的相关性,所以让我们来学习一下从Illustrator导出SVG文件到Web浏览器的基础知识。

使用CSS和SVG制作带纹理文本的三个技巧

你也许能够熟练的使用PS对文本进行图像掩埋;一个比较好的方法是在文字上添加一些纹理或者是一个背景图片。然后把这个文本存储为图像,你就可以在你的网站上使用;但是如果可以只使用HTML和CSS来产生相同的效果不是更好吗?好消息是,确实可以!CSS介绍了background-clipmask-image的属性,或许你可以使用他们来创造相似的效果,就像你用PS创造出来的那样。最重要的是,你也可以使用SVG来进行文本图像剪辑。

[转载]纯clip-path打造的3D模型渲染器

species-in-pieces网站的效果让前端人员眼前一亮,我在微博上发了这样的效果,聚集了不少同学的讨论。在大知乎上也有很多同学关注这个话题@拴萝卜的棍子前端乱炖上发表了一篇文章,剖析了相关的技术。值得大家一读,特将此文转载到小站。

SVG基础——如何使用可缩放矢量图形(SVG)

每次我讲到图像的时候,我都会提到,在可能的情况下,对于位图来说,可缩放矢量图形(SVG)都是最好的选择。上次我给别人提建议的时候,我意识到我没有自己想象中的那么了解SVG。我之前写过一两篇关于SVG的文章,但也仅是我自己实践经验的一点延伸。我打算今天开始写SVG系列的文章,接下来的几个星期我会介绍一些SVG的基础知识,还会在年尾的时候增加额外的主题来重温这一年讲解的SVG。

Polylion

有时候,你最意想不到的东西,却能获得最多的关注,正如我发表在CodePen上的多边形狮子的样例。我没有做任何超级棒的代码效果,因为我认为简单的动画效果是很容易理解的,但是最后的结果却是很棒的。在这里,我想要和你们所有人分享这个动画如何以及为什么做出来的。

SVG 基础——使用Curve指令创建路径

上周,我开始了关于路径的探讨,主要集中在使用不同的直线指令绘制各种直线和形状。今天我想要继续进行路径的探讨,谈谈可使用的不同的曲线指令。曲线指令比直线指令需要解释的东西更多,所以我们马上开始吧。我会假设你已经阅读了上一篇关于直线指令的文章,如果你还没阅读,最好先去看那篇。

SVG基础——使用Line指令创建路径

几个星期前在谈到基本的SVG图形时,我提到路径可以作为一个更常用的方法来创建任何形状。路径比基本图形更强大和灵活,可以用来创建任何一个基本图形。使用路径你可以创建直线和曲线,也可以把它们连接起来,组成其它的形状。你可以结合两者来创建复杂的路径和子路径。路径可以被填充、描边或者用于剪裁其他元素。它们可以同时做这三种效果甚至更多。

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

在SVG绘制的任何一个时刻,你可以通过嵌套<svg>或者使用例如<symbol>的元素来建立新的viewport和用户坐标系。在这篇文章中,我们将看一下我们如何这样做,以及这样做如何帮助我们控制SVG元素并让它们变得更加灵活(或流动)。这是SVG坐标系和变换系列的第三篇也是最后一篇文章。在第一篇中,包括了任何要理解SVG坐标系统基础的需要知道的内容;更具体的是, SVG viewport, viewBoxpreserveAspectRatio属性。在第二篇文章里,你可以了解到任何你需要了解的关于SVG系统变换的内容。

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

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

页面

返回顶部