SVG

SVG画布,坐标系统,视窗

当你在屏幕上看SVG图像时,你是通过SVG视窗来看到画布的,所以其实你只看到了画布的一部分。画布和视窗是既相互独立又相互联系的概念,它们之间的关系很容易混淆,导致有时会有预料之外的结果。你只有弄明白了它们之间的关系,才知道如何去控制它们。

SVG基础——填充和描边

过去几周我讲解了可缩放矢量图形(SVG)的一些基础知识。首先,我展示了如何在HTML中嵌入SVG,接着讲解了如何创建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图形时,我提到路径可以作为一个更常用的方法来创建任何形状。路径比基本图形更强大和灵活,可以用来创建任何一个基本图形。使用路径你可以创建直线和曲线,也可以把它们连接起来,组成其它的形状。你可以结合两者来创建复杂的路径和子路径。路径可以被填充、描边或者用于剪裁其他元素。它们可以同时做这三种效果甚至更多。

页面

返回顶部