SVG

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

SVG元素不像HTML元素一样由CSS盒模型管理。这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观。然而,一旦你理解了SVG坐标系和变换,操纵SVG会非常简单并且很有意义。本篇文章中我们将讨论控制SVG坐标系的最重要的三个属性:viewportviewBox, 和 preserveAspectRatio。接下来通过三篇文章分别向大家阐述这方面相关的知识。

SVG系列教程:坐标系统

SVG其实相当于一块画板,然后在这块画板上绘图形,而每个画板都会有一个坐标系统。比如说画板的原始起点,绘制图形的起始点坐标,终点坐标等。这一切的一切都离开不坐标,而这些坐标就组成了一个坐标系统。在这篇文章的所要介绍就是SVG中一个关键知识点——SVG坐标。简单点理解SVG坐标就是屏幕坐标点(从技术上讲,最初的viewport坐标系统)与任何SVG元素相关联的坐标点系统(当前用户坐标系统)。例如,一个<svg>中使用<circle>绘制的一个圆,他就使用了一个标准的笛卡尔坐标系统(Cartesian Coordinate System)。

如何实现跨浏览器的SVG Sprites

CSS Sprites对于前端人员都比较熟悉,为了让Web网站减放Http的请求数,很多同学都常使用Sprites(国内称之为雪碧图或精灵)。但随着技术的更新,位图的Sprites已无法满足我们实际的需求了。这篇译文就用另外的一种方式,向大家阐述了Sprites——如何实现跨浏览器的SVG Sprites。

[转载]理解SVG的viewport,viewBox,preserveAspectRatio

viewportviewBoxpreserveAspectRatio是SVG中基础而且必须了解的几个部分,如果这几个部分没有理解清楚,对大家今后学习SVG相关知识以及使用会带来很大障碍。这几日看到张大师(@张鑫旭)写了一篇与此相关的文章《理解SVG的viewport,viewBox,preserveAspectRatio》,特意将此文转载致此。

SVG系列教程:SVG文件结构

在《SVG简介与嵌入HTML页面的方式》简单的介绍了什么是SVG?以及SVG图形与其它格式图像相比,优势在哪。另外介绍怎么将SVG图像应用到HTML页面,让浏览器能显示。从文中了解到,SVG图形其实就是一段XML代码,在HTML页面引用是通过引用.svg文件格式,或者直接在.html文件中放置<svg>元素。而两者最大的区别就是,独立的SVG必须添加一个XML声明。那么这篇文章要和大家一起探讨的就是SVG文件(.svg)的结构。

SVG系列教程:SVG简介与嵌入HTML页面的方式

随着技术向前的推进,SVG相关的讨论也越渐频繁。为了紧跟时代的步伐,我也开始步入SVG相关技术的探索与学习之中。从这篇文章开始会在W3cplus站点上陆续向大家推出有关于SVG相关的教程、译文或案例等。感兴趣的同学可以跟随着教程一起了解与学习SVG相关的知识与技巧。

inline SVG 入门指南

SVG全称为“可缩放矢量图形”,它的名字暗示着它本身的特点。SVG让我们可以将一个图形从100%放大到1000%并且完全不失真。SVG是一个基于XML并可以在SVG对象中描述不同形状和路径的文件。每一个形状和路径都由一系列的点、位置、长度、半径,等等的来组成。如果你曾经使用过任何的矢量图软件 (像 Adobe Illustrator 或 Corel Draw),你能将你创建的矢量图轻松地输出为SVG文件。

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

CSS和SVG有很多共同之处。CSS有很多特性都是从SVG中引入过来的。其中就有“剪切”的特性。CSS和SVG都允许我们对一个元素进行非矩形的剪切。在这篇文章中,将介绍CSS和SVG中的剪切技术。

Inline SVG vs Icon Fonts

当你为一个网站建一套图标系统的时候,你有几种选择。如果你知道图标需要是像素画图片的时候,你可能会用到css sprites也就是雪碧.而如果图标需要是矢量图的时候(现在已越来越普遍),你有两种选择,他们是ƒsvg图标字体

使用SVG完成悬浮时形状样式变化的效果

在这篇教程里,我们将重新创建一个类似The Christmas Experiments网站中看到的hover样式。我们将通过SVG制作出形状,然后使用Snap.svg做出hover时的动画效果。如果你已经访问过The Christmas Experiments最新版本的网站,你可能会注意到其中Christmas calendar很酷的三角状的hover效果。那个形状其实是一个带边框的三角形。今天我会向您展示,如何使用SVG和Snap.svg做出同样的效果。我们的想法是,使用一条路径创建一个SVG,用它来表示caption的形状背景,然后在hover时改变这个路径。完成这一任务有很多种创作的可能性,今天我们将做出三个不同的示例。使用SVG的好处是,我们可以根据父容器的大小调整形状的大小,使一切都成为流动的。

页面

返回顶部