使用SVG中的Symbol元素制作Icon
发表于
svg
分类，标签:
24
08月
2015
0
原文出处：腾讯ISUX 欢迎分享原创到伯乐头条前言随着大屏幕分辨率的普及以及各种移动设备层出不穷的移动互联网时代的到来，我们在网站设计时更应该关心内容在各种设备上的阅读性和显示效果。我们都希望能在任何时间，任何设备上都能清楚的，高效的传递信息给用户。而随着各种高清视网膜屏幕的出现，现在web设计也需要考虑各种高清屏幕的显示效果，同样前端在代码实现的时候也需要根据屏幕的不同来输出不同分辨率的图片。为了使我们的网页能够适配视网膜屏幕上的高分辨率，在前端开发中一般需要准备两套不同尺寸的图片来应对，一套在普通屏幕上显示；一套在高清屏幕上显示。为了解决屏幕分辨率对图标影响的问题，字体图标即iconfont顺势而生。字体图标是一种全新的设计方式。更重要的是相比图片而言，使用字体来制作图标可以不受于屏幕分辨率的影响，这对于现在各种分辨率屏幕的移动互联...
未命名
发表于
svg
分类，标签:
05
08月
2015
Web设计新趋势：使用SVG代替IconFont- io-meter.com 如果你还在使用IconFont作为网页中显示图标的实现方案，那么你可能有点Out了。由于使用IconFont显示图标存在一些缺陷，开发者们一直在致力于探索使用SVG作为替代的方法。这篇文章列举了目前SVG比较常见的使用方法。 阅读原文» http://io-meter.com/2014/07/20/replace-icon-fonts-with-svg/...
SVG系列教程：SVG文件结构
发表于
svg
分类，标签:
31
07月
2015
在《SVG简介与嵌入HTML页面的方式》简单的介绍了什么是SVG？以及SVG图形与其它格式图像相比，优势在哪。另外介绍怎么将SVG图像应用到HTML页面，让浏览器能显示。从文中了解到，SVG图形其实就是一段XML代码，在HTML页面引用是通过引用.svg文件格式，或者直接在.html文件中放置<svg>元素。而两者最大的区别就是，独立的SVG必须添加一个XML声明。那么这篇文章要和大家一起探讨的就是SVG文件(.svg)的结构。SVG文件结构一个独立的SVG文件，也就是平时看到的以扩展名.svg结尾的文件，他主要包括：XML声明<svg>根元素包括一个用来描述SVG的XML声明空间。其中XML声明其实和HTML文档的DTD声明是类似的。大家是否还记得HTML相关的DTD声明方式。比如HTML5的声明方式：<!DOCTYPE html>其它相关的...
SVG系列教程：SVG简介与嵌入HTML页面的方式
发表于
svg
分类，标签:
31
07月
2015
随着技术向前的推进，SVG相关的讨论也越渐频繁。为了紧跟时代的步伐，我也开始步入SVG相关技术的探索与学习之中。从这篇文章开始会在W3cplus站点上陆续向大家推出有关于SVG相关的教程、译文或案例等。感兴趣的同学可以跟随着教程一起了解与学习SVG相关的知识与技巧。什么是SVGSVG是"ScalableVectorGraphics"的简称。中文可以理解成“可缩放矢量图形”。这个概念对于设计师来讲一点不陌生，但对于码农来讲，总是没有设计师们理解的那么透彻。其实码农们也没必要理解的那么透彻，只需要知道他是web页中的矢量图即可。如果你是想知道，可以看看维基百科给的一个阐述：ScalableVectorGraphics(SVG)isanXML-basedvectorimageformatfortwo-dimensionalgraphicswith...
10 个非常实用的 SVG 动画操作JavaScript 库
发表于
svg
分类，标签:
21
07月
2015
10个非常实用的SVG动画操作JavaScript库[日期：2015-02-14]来源：oschina.net 作者：21paradox-,天liang好个qiu[字体：大 中 小]SVG通常可以用作跨分辨率视频。这意味着在一块高分屏幕上不会降低图片的锐度。此外，你甚至可以让SVG动起来，通过使用一些javascript类库。下面，我们分享一些javascript类库，这些类库会帮助我们将SVG动画提高一个等级。VivusVivus是一个能动画js类库，它能够给SVG图像显示出被画出来的过程。Vivus是没有其他类库依赖的（比如jQuery)。你仅仅需要在页面中加入这个.js文件，然后传入需要被用来动画的SVG部分就行。同时通过指定一些配置，它能够在页面加载后直接显示动画效果。BonsaiBonsai是一个功能丰富的JS类库，你能够用它来...
Snap.svg.js绘图出现的一些问题以及解决方案
发表于
svg
分类，标签:
03
07月
2015
动态创建的svg1追加到父元素的svg2中，动态创建的svg1下的子元素全部创建在svg2下；解决方案：例子：var svg2=Snap(1000,400);svg2.attr({id:"parent"})var svg1=Snap(400,300); svg2.append(svg1);//（注意这里是在svg1还没创建元素就把svg1追加到svg2后面） varcircle= svg1.paper.el("circle",{cx:50,cy:50,r:20,fill:"red"})这里只需要把svg2.append(svg1)；//这句话放到最后面就行；或者: svg1.append(circle)；//这样写一句话...
理解SVG坐标系统和变换： transform属性
发表于
svg
分类，标签:
30
06月
2015
（本文转自http://www.w3cplus.com/html5/svg-transformations.html）SVG元素可以通过缩放，移动，倾斜和旋转来变换-类似HTML元素使用CSStransform来变换。然而，当涉及到坐标系时这些变换所产生的影响必然有一定差别。在这篇文章中我们讨论SVG的transform属性和CSS属性，包括如何使用，以及你必须知道的关于SVG坐标系变换的知识。这是我写的SVG坐标系统和变换部分的第二篇。在第一篇中，包括了任何要理解SVG坐标系统基础的需要知道的内容；更具体的是，SVGviewport, viewBox 和 preserveAspectRatio 属性。理解SVG坐标系和变换（第一部分）-viewport，viewBox，和preserveAspectRatio理解SVG坐标系和变换（第二部分...
理解SVG坐标系统和变换： 建立新视窗
发表于
svg
分类，标签:
30
06月
2015
（本文转自http://www.w3cplus.com/html5/nesting-svgs.html）在SVG绘制的任何一个时刻，你可以通过嵌套<svg>或者使用例如<symbol>的元素来建立新的viewport和用户坐标系。在这篇文章中，我们将看一下我们如何这样做，以及这样做如何帮助我们控制SVG元素并让它们变得更加灵活（或流动）。这是SVG坐标系和变换系列的第三篇也是最后一篇文章。在第一篇中，包括了任何要理解SVG坐标系统基础的需要知道的内容；更具体的是，SVGviewport, viewBox和 preserveAspectRatio属性。在第二篇文章里，你可以了解到任何你需要了解的关于SVG系统变换的内容。理解SVG坐标系和变换（第一部分）-viewport，viewBox，和preserveAspectRatio理解SVG坐标系...
svg g标签的运用
发表于
svg
分类，标签:
29
06月
2015
在svg中提供了如g元素这样的将多个元素组织在一起的元素。由g元素编组在一起的可以设置相同的颜色，可以进行坐标变换下面是运用了snap.svg.js的实例// 创建一个svg对象var snap=Snap("#circle");snap.attr({width:1000,height:600});// 路径vard="M45.72,23.661C45.663,10.593,35.487,0,22.86,0C10.234,0,0,10.593,0,23.661"+ "c0,13.383,14.294,33.036,20.257,40.65c1.308,1.67,3.829,1.675,5.141,0.009C31.394,56.709,45.78,37.05,45.72,23.661&qu...