SVG学习笔录(一)

  SVG可缩放矢量图形(Scalable Vector Graphics)这项技术,现在越来越让大家熟知,在h5的移动端应用使用也越来越广泛了, 下面让我分享给大家svg学习的经验。

  HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素。这两种技术都支持绘制矢量图和光栅图。

一、什么是svg?

  Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。

  特征:

  SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  SVG 用来定义用于网络的基于矢量的图形
  SVG 使用 XML 格式定义图形
  SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  SVG 是万维网联盟的标准
  SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

  与其他图像格式相比,使用 SVG 的优势在于:
  SVG 可被非常多的工具读取和修改(比如记事本)
  SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
  SVG 是可伸缩的
  SVG 图像可在任何的分辨率下被高质量地打印
  SVG 可在图像质量不下降的情况下被放大
  SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
  SVG 可以与 Java 技术一起运行
  SVG 是开放的标准
  SVG 文件是纯粹的 XML

  在兼容方面,chrome、foxfire、ie9及以上浏览器支持,但是SVG SMIL动画 IE浏览器(包括IE11)整体不支持(但对于移动端来说呢,基本支持)。

  注意:SVG是以XML定义的,所以是大小写敏感的,这点与HTML不一样。

二、SVG的呈现方式

  对于直接支持SVG的浏览器,SVG主要采用两面两种呈现的方式。

    内联到HTML
  SVG是标准的HTML元素,直接写到HTML中就可以了,看下面的例子:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>
  <!-- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> -->
  <title> My First SVG Page</title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
       width="200px" height="200px">
    <rect x="0" y="0" width="100%" height="100%"
          fill="none" stroke="black"/>
    <circle cx="100" cy="100" r="50"
            style="stroke: black; fill: red;"/>
  </svg>
</body>
</html>

  请注意开头的部分xml声明,与svg的命名空间xmlns、版本version等部分,主要是考虑兼容性的问题;这些部分在HTML5中基本都可以不用写了(写不写还是自己瞧着办吧)。

  独立SVG文件

  独立SVG指的是通过使用svg文件扩展名来提供向量图形文件格式。在浏览器中嵌入这个svg文件就可以使用了。

  1.独立的SVG文件/页面,定义的模板基本就像下面的一样:

<svg width="100%" height="100%">
  <!-- SVG markup here. -->
  <circle cx="100" cy="100" r="50" style="stroke: black; fill: red;"/>
</svg>

  把这样的文本文件保存成以svg为扩展名的文件,例如sun.svg,这样的文件可以直接用浏览器打开浏览,也可以作为引用嵌入到别的页面中。

  2.HTML引用外部的SVG文件,可以使用<embed> <object>  <iframe>  引入

  语法:<embed>

<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

  语法:<object>

<object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

  语法:<iframe>

<iframe src="rect.svg" width="300" height="100">
</iframe>

三、SVG的渲染顺序

  SVG是严格按照定义元素的顺序来渲染的,这个与HTML靠z-index值来控制分层不一样。在SVG中,写在前面的元素先被渲染,写在后面的元素后被渲染。后渲染的元素会覆盖前面的元素,虽然有时候受透明度影响,看起来不是被覆盖的,但是SVG确实是严格按照先后顺序来渲染的。

四、SVG的文档结构

  SVG文档的元素基本可以分为以下几类:

  • 图形元素:circle, ellipse, line, path, polygon, polyline, rect;
  • 解释元素:desc, metadata, title;
  • 结构元素:defs, g, svg, symbol, use;
  • 渐变元素:linearGradient, radialGradient;
  • 动画元素:animate, animateColor, animateMotion, animateTransform, set;
  • 其他元素:a,altGlyphDef,clipPath,color-profile,cursor,filter,font,font-face,foreignObject,image,marker,mask,pattern,script,style,switch,text,view等。

  视窗 - svg元素

可以在svg元素中以任何顺序放置任何的其他元素,包括嵌套svg元素。
      svg元素支持的属性常用的也就是id,class,x,y,width,height,viewBox,preserveAspectRatio,以及fill和stroke的相关属性。
      svg元素支持的事件也是常用的onload, onmouseover, onmousemove, onmousedown, onmouseup, onclick, onfocusin, onfocusout, onresize, onscroll, onunload等。svg元素就不多说了,完整的属性和事件列表参看后面的官方文档。

  图形元素:

  SVG 有一些预定义的形状元素,可被开发者使用和操作:

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线 <line>
  • 折线 <polyline>
  • 多边形 <polygon>
  • 路径 <path>

  具体的我说一下path的用法,其他的都比较好理解:

  路径 - path元素

  这个是最通用,最强力的元素了;使用这个元素你可以实现任何其他的图形,不仅包括上面这些基本形状,也可以实现像贝塞尔曲线那样的复杂形状;此外,使用path可以实现平滑的过渡线段,虽然也可以使用polyline来实现这种效果,但是需要提供的点很多,而且放大了效果也不好。这个元素控制位置和形状的只有一个参数:
  d:一系列绘制指令和绘制参数(点)组合成。

  绘制指令分为绝对坐标指令和相对坐标指令两种,这两种指令使用的字母是一样的,就是大小写不一样,绝对指令使用大写字母,坐标也是绝对坐标;相对指令使用对应的小写字母,点的坐标表示的都是偏移量。

  绝对坐标绘制指令
  这组指令的参数代表的是绝对坐标。假设当前画笔所在的位置为(x0,y0),则下面的绝对坐标指令代表的含义如下所示:


指令


参数


说明


M


x y


将画笔移动到点(x,y)


L


x y


画笔从当前的点绘制线段到点(x,y)


H


x


画笔从当前的点绘制水平线段到点(x,y0)


V


y


画笔从当前的点绘制竖直线段到点(x0,y)


A


rx ry x-axis-rotation large-arc-flag sweep-flag x y


画笔从当前的点绘制一段圆弧到点(x,y)


C


x1 y1, x2 y2, x y


画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)


S


x2 y2, x y


特殊版本的三次贝塞尔曲线(省略第一个控制点)


Q


x1 y1, x y


绘制二次贝塞尔曲线到点(x,y)


T


x y


特殊版本的二次贝塞尔曲线(省略控制点)


Z


无参数


绘制闭合图形,如果d属性不指定Z命令,则绘制线段,而不是封闭图形。

  移动画笔指令M,画直线指令:L,H,V,闭合指令Z都比较简单。例子:

	<svg width="200" height="150">
	  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
		stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
	  <path d="M 10 75 L 190 75" stroke="red"
		stroke-linecap="round" stroke-width="1" stroke-dasharray="20" fill="none"/>
	</svg>

  解释性元素 - desc元素与title元素(此元素主要是做辅助,不会显示)
      每个容器元素(可以包含其他容器元素或者图形元素的元素,例如:a,defs,glyph,g,marker,mask,missing-glyph,pattern,svg,switch和symbol)和图形元素都可以包含desc和title元素,这两个元素都是辅助性的元素,用于解释相关情境;它们的内容都是文本。当SVG文档被渲染的时候,这2个元素不会被渲染到图形中。这个2个元素之间差别不是太大,title在有些实现中是作为提示信息出现的,所以通常title是放到父元素的第一个位置上。  

  结构元素

  组合 - g元素

   g元素是一种容器,它组合一组相关的图形元素成为一个整体;这样,我们就可以对这个整体进行操作。这个元素通常可以和desc和title元素配合使用,提供文档的结构信息。结构良好的文档通常可读性和渲染效率都不错。看一个小例子:

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="5cm" height="5cm">
  <desc>Two groups, each of two rectangles</desc>
  <g id="group1" fill="red">
    <rect x="1cm" y="1cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="1cm" width="1cm" height="1cm"/>
  </g>
  <g id="group2" fill="blue">
    <rect x="1cm" y="3cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="3cm" width="1cm" height="1cm"/>
  </g>

  <!-- Show outline of canvas using ‘rect‘ element -->
  <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm"
        fill="none" stroke="blue" stroke-width=".02cm"/>
</svg>

  注意几点:
  1. xmlns="http://www.w3.org/2000/svg"表明了整个svg元素默认的命名空间是svg。这个在无歧义的时候可以省略。这里由于svg文档是一个XML文档,XML命名空间的相关规则这里都是适用的。例如可以给svg显示的指定命名空间,给命名空间提供别名等。
  2. g元素是可以嵌套的。
  3. 组合起来的图形元素就和单个的元素一样,可以给id值,这样,需要的时候(例如动画和重用一组元素)只用引用这个id值就可以了。
  4. 组合一组图形元素可以统一设置这组元素的相关属性(fill,stroke,transform等),这也是使用组合的一种场景。

  模板 - symbol元素

  symbol元素用于定义图形模板(模板可以包含很多图形),这个模板可以被use元素实例化。模板的功能与g元素很相似,都是提供一组图形对象,但是也有一些区别。与g元素不同的地方是:
  1.symbol元素本身是不会被渲染的,只有symbol模板的实例会被渲染。
  2.symbol元素可以拥有属性viewBox和preserveAspectRatio,这些允许symbol缩放图形元素。
      从渲染角度来说,与symbol元素相似的元素是marker(定义箭头和标号)和pattern(定义颜色)元素;这些元素不会直接被渲染;他们的使用方式基本都是由use元素去实例化。正是这个原因,对于symbol来说,‘display‘属性是没有意义的。
      下面这个修改过的代码显示了symbol的使用方式:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" width="5cm" height="5cm">
  <desc>Two groups, each of two rectangles</desc>
  <symbol id="group1" fill="red">
    <rect x="1cm" y="1cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="1cm" width="1cm" height="1cm"/>
  </symbol>
  <g id="group2" fill="blue">
    <rect x="1cm" y="3cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="3cm" width="1cm" height="1cm"/>
  </g>
  <use xlink:href="#group1" target="_blank" rel="nofollow">

  <!-- Show outline of canvas using ‘rect‘ element -->
  <rect x=".02cm" y=".02cm" width="4.96cm" height="4.96cm"
        fill="none" stroke="blue" stroke-width=".02cm"/>
</svg>

  定义 - defs元素

SVG允许定义一组对象,然后重用这组对象(注意,不仅仅是图形对象)。最常见的例子如定义渐变色,然后再其他的图形对象中赋给fill属性。渐变色定义的时候是不会渲染的,所以这类型的对象可以放到任何地方。重用对于图形对象中也是经常存在的,而且我们也不希望定义的时候直接渲染,而是想在引用的地方渲染,这个可以用defs元素实现。

通常情况下,推荐的做法是:只要有可能,就把被引用的对象放到defs元素中。这些对象通常是:altGlyphDef,clipPath,cursor,filter, marker,mask,pattern,linearGradient,radialGradient,symbol和图形对象等。把这些对象定义在defs元素中很容易理解,所以就提高了可访问性。
      其实作为容器对象的g元素、symbol元素、defs元素都不同程度上提供了重用的作用,只不过每个元素的特性可能少许不同:比如g元素是直接渲染的,symbol和defs不会直接渲染,symbol含有viewBox属性,会创建新的视窗。

通常都会给在defs中定义的元素赋予id属性,并在用到的地方直接使用。根据元素的不同,这些定义可以用到不同地方,比如下面的渐进色作为属性来使用了:

  

<svg width="8cm" height="3cm"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Local URI references within ancestor‘s ‘defs‘ element.</desc>
  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>
  <rect x="1cm" y="1cm" width="6cm" height="1cm"
        fill="url(#Gradient01)"  />
</svg>

  图形相关元素的定义可以用use元素链接到文档。例如:

<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example Use01 - Simple case of ‘use‘ on a ‘rect‘</desc>
  <defs>
    <rect id="MyRect" width="60" height="10"/>
  </defs>
  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />
  <use x="20" y="10" xlink:href="#MyRect" />
</svg>

   在这里请注意xlink名称空间的使用。尽管大多数查看器没有它也将正确显示这一项,但为了保持一致,xlink名称空间应该在<svg></svg>元素上定义。

  动画元素

   SVG提供了下列动画元素:
  1. animate元素
      这个是最基本的动画元素,可以直接为相关属性提供不同时间点的值。
  2. set元素
      这个是animate元素的简写形式,支持所有的属性类型,尤其是当对非数字型的属性(例如visibility)进行动画时很方便。set元素是非增量的,相关的属性对之无效。 to指定的动画结束值类型一定要符合属性的取值类型。
  3. animateMotion元素
      路劲动画元素。这个元素大多数属性都和上面一样,只有下面几个稍微有点区别:
  calcMode = "discrete | linear | paced | spline"
      这个属性的默认值不同,在该元素中默认的是paced。
  path = "<path-data>"
      动画元素移动的路径,格式与path元素的d属性的值的格式是一致的。
  keyPoints = "<list-of-numbers>"
      这个属性的值是一系列分号给开的浮点数值,每个值的取值范围是0~1。这些值代表了keyTimes属性指定的对应时间点移动的距离,这里距离具体是多少是由浏览器自己决定的。
  rotate = <number> | auto | auto-reverse"
      这个属性指定了元素移动时旋转的角度。默认值是0,数字代表旋转的角度,auto表示随着路劲的方向转动物体。auto-reverse表示转向与移动方向相反的方向。
      此外animateMotion元素的from,by,to,values的值都是坐标对组成的;x值与y值之间用逗号或空格分开,每个坐标对之间用分号隔开比如from="33,15"表示起点x坐标为33,y坐标为15。
指定运动路径的方式有两种:一种为直接给path属性赋值,一种为使用mpath元素作为animateMotionde的子元素指定路径。如果同时使用这两种方式,则使用mpath元素优先级高。这两种方式优先级都比values,from,by,to高。
      看一个小例子:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="3cm"  viewBox="0 0 500 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >
  <rect x="1" y="1" width="498" height="298"
        fill="none" stroke="blue" stroke-width="2" />

  <path id="path1" d="M100,250 C 100,50 400,50 400,250"
        fill="none" stroke="blue" stroke-width="7.06"  />
  <circle cx="100" cy="250" r="17.64" fill="blue"  />
  <circle cx="250" cy="100" r="17.64" fill="blue"  />
  <circle cx="400" cy="250" r="17.64" fill="blue"  />
  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
        fill="yellow" stroke="red" stroke-width="7.06"  >
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
       <mpath xlink:href="#path1"/>
    </animateMotion>
  </path>
</svg>

  4. animateColor元素
      颜色动画元素。这是一个过时的元素,基本上所有功能都可以用animate代替,所以还是不要用了。

  5. animateTransform元素
      变换动画元素。看看特殊的一些属性:
     type = "translate | scale | rotate | skewX | skewY"
      这个属性指定了变换的类型,translate是默认值。
      from,by和to的值相应的都是对应变换的参数,这个还是与前面讲的变换是一致的。values则是一组分号隔开的这样的值系列。

  支持动画效果的元素和属性
      基本上所有图形元素(path,rect,ellipse,text,image...),容器元素(svg, g, defs, use, switch, clipPath, mask...)都支持动画。基本上大多数的属性都支持动画效果。详细的说明请参看官方文档。

五、理解SVG的viewport,viewBox,preserveAspectRatio

  viewport

  表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小。

<svg width="500" height="300"></svg>

  上面的SVG代码定义了一个视区,宽500单位,高300单位。

  注意:

  上面的SVG代码定义了一个视区,宽500单位,高300单位。

  不带单位的情况 :不带单位的值被认为带的是"用户单位",就是当前用户坐标系的单位值。

  带单位的情况

   svg中相关单位与CSS中是一样的:em,ex,px,pt,pc,cm,mm和in。长度还可以使用"%"。
    相对度量单位:em和ex也与CSS中一样,是相对于当前字体的font-size和x-height来说的。
    绝对度量单位:一个px是等于一个"用户单位"的,也就是"5px"与"5"是一样的。但是一个px是不是对应一个像素,那就看有没有进行过一些变换了。
       其他的几个单位基本都是px的倍数:1pt=1.25px,1pc=15px,1mm=3.543307px,1cm=35.43307px,1in=90px。

如果最外层的SVG元素的width和height没有指定单位(也就是"用户单位"),则这些值会被认为单位是px。

  viewBox视窗变换

  viewBox属性值的格式为(x0,y0,u_width,u_height),每个值之间用逗号或者空格隔开(已经绘制图形的坐标一样),它们共同确定了视窗显示的区域:视窗左上角坐标设为(x0,y0)、视窗的宽设为u_width,高为u_height;这个变换对整个视窗都起作用。

这里一定不要混淆:视窗的大小和位置已经由创建视窗的元素和外围的元素共同确定了(例如最外层的svg元素建立的视窗由CSS,width和height确定),这里的viewBox其实是设置这个确定的区域能显示视窗坐标系的哪个部分。
      viewBox的设置其实是包含了视窗空间的缩放和平移两种变换。

变换的计算也很简单:以最外层的svg元素的视窗为例,假设svg的宽与长设置为width,height,viewBox的设置为(x0,y0,u_width,u_height)。则绘制的图形,宽和高的缩放比例分别为:width/u_width, height/u_height。视窗的左上角的坐标设置为了(x0,y0)。

   在日常工作中,我们经常需要完成的一个任务就是缩放一组图形,让它适应它的父容器。我们可以通过设置viewBox属性达到这个目的。

  能建立新视窗的元素
      任何时候,我们都可以嵌套视窗。创建新的视窗的时候,也会创建新的视窗坐标系和用户坐标系,当然也包括裁减路径也会创建新的。下列是能建立新视窗的元素列表:
  svg:svg支持嵌套。
  symbol:当被use元素实例化的时候创建新的视窗。

  image:引用svg元素时会创建新视窗。
  foreignObject:创建新视窗去渲染里面的对象。

   preserveAspectRatio-保持缩放的比例 属性
      有些时候,特别是当使用viewBox的时候,我们期望图形占据整个视窗,而不是两个方向上按相同的比例缩放。而有些时候,我们却是希望图形两个方向是按照固定的比例缩放的。使用属性preserveAspectRatio就可以达到控制这个的目的。
      这个属性是所有能建立一个新视窗的元素,再加上image,marker,pattern,view元素都有的。而且preserveAspectRatio属性只有在该元素设置了viewBox以后才会起作用。如果没有设置viewBox,则preserveAspectRatio属性会被忽略。
      属性的语法如下:preserveAspectRatio="[defer] <align> [<meetOrSlice>]"
  注意3个参数之间需要使用空格隔开。
  defer:可选参数,只对image元素有效,如果image元素中preserveAspectRatio属性的值以"defer"开头,则意味着image元素使用引用图片的缩放比例,如果被引用的图片没有缩放比例,则忽略"defer"。所有其他的元素都忽略这个字符串。
  align:该参数决定了统一缩放的对齐方式,可以取下列值:
    none - 不强制统一缩放,这样图形能完整填充整个viewport。
    xMinYMin - 强制统一缩放,并且把viewBox中设置的<min-x>和<min-y>对齐到viewport的最小X值和Y值处。
    xMidYMin - 强制统一缩放,并且把vivewBox中X方向上的中点对齐到viewport的X方向中点处,简言之就是X方向中点对齐,Y方向与上面相同。
    xMaxYMin - 强制统一缩放,并且把viewBox中设置的<min-x> + <width>对齐到viewport的X值最大处。
    类似的还有其他类型的值:xMinYMid,xMidYMid,xMaxYMid,xMinYMax,xMidYMax,xMaxYMax。这些组合的含义与上面的几种情况类似。
  meetOrSlice:可选参数,可以去下列值:
    meet - 默认值,统一缩放图形,让图形全部显示在viewport中。
    slice - 统一缩放图形,让图形充满viewport,超出的部分被剪裁掉。

六、SVG图形在移动端的自适应方法

  在上面我们了解了viewBox视窗变换之后,其实可以得出一个公式:

  width为svg的里面设置的宽度

  height为svg里面设置的高度

  uwidth为svg里面设置的宽度

   uheight为svg里面设置的高度

  cw为图形设置的高度

  ch为图形设置的宽度

  sW为实际宽度

  sH为实际高度

  实际宽度:sW = (width/uwidth)*cw  

  实际高度:sH = (height/uheight)*ch

例子:

	<svg width="200" height="200" viewBox="0 0 100 100">
	 <rect x="0" y="0" width="200" height="200" fill="Red" />
	</svg>

  根据公式:

  sW = (200/100)*200 = 400px

  sH = (200/100)*200 = 400px

  场景需求:通常来说我们的我移动端大部分视觉稿来说是640*960的(以这个为主呢,不说1080、720了),这里黑色不规则区域高度为200px,宽度为640px(640下面)

  

  根据上面的公司,其实我们的svg里面的图形元素可以按实际640的大小写,viewbox的大小值也可以按,640的大小写,我们只需要控制svg容器上面的width、height大小的值变化,就可以达到适应的效果,看看代码:

<svg class="svg_pro" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,640,200">
			<polygon points="0,0 253,0 200,200 0,200" style="fill:rgba(0,0,0,.8);"></polygon>
			<polygon points="256,0 640,0 640,200 203,200" style="fill:rgba(0,0,0,.8);"></polygon>
</svg>

   svg基本上所有的属性(对于所有元素,不仅是文本)都可以用CSS与一个元素关联,并且所有CSS属性都在SVG图像中可用,那么我们在样式里面加上如下样式,就可以达到只适应:

svg.svg_pro {
    position: absolute;
    width: 100%; //这里宽度的值随着屏幕变化
    height: 100%; //高度值随着屏幕变化(图片缩放,改变容器高度)
    top: 0;
}

  然并卵,这样就可以达到效果了,待续………………

参考资料:

  突袭HTML5之SVG 2D入门(svg教程写的很全,推荐指数5星)

  SVG 教程(w3school的svg教程,也不错)

  mozilla svg教程(推荐给喜欢看英文教程的朋友)

  超级强大的SVG SMIL animation动画详解

  w3cplus大漠博客上的svg教程

  基本 SVG 动画

  知乎上面对svg的一些讨论(大家在使用时,有必要可以看一下)

  svg动画推荐

推荐svg库:

  Walkway

  chartist-js

  snapsvg.io

  progressbar.js

  raphaeljs

  bonsaijs

时间: 2024-10-29 15:42:57

SVG学习笔录(一)的相关文章

SVG学习笔录(二)

一.svg动画SMIL SVG采用的是使用文本来定义图形,这种文档结构非常适合于创建动画.要改变图形的位置.大小和颜色,只需要调整相应的属性就可以了.事实上,SVG有为各种事件处理而专门设计的属性,甚至很多还是专门为动画量身定做的.在SVG中,实现动画通常使用SVG SMIL animation.      通过SMIL可以实现的基本动画:      •动画元素的数值属性(X, Y, …)      •动画属性变换(平移或旋转)      •动画颜色属性      •沿着运动路径运动(这一点非常

SVG 学习(一)

SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 SVG 的历史和优势 在 2003 年一月,SVG

HTML5实战——svg学习

百度百科: SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG是W3C制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准.SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格

[翻译]svg学习系列 开篇

网上svg的资料太少 买个书也买不到 碰巧遇到一个外国友人的svg学习些列,翻译下 http://tutorials.jenkov.com/svg/index.html svg 简介 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 今天的现代多数浏览器都支持SVG  ie9+ 火狐 chrome 等 svg 最大的用途就是绘图 各种图标 等 ,在网页上直接绘图 因为svg本身的dom节点,所以可以和网页上其他

SVG 学习&lt;五&gt; SVG动画

先上个动画图 说道SVG动画不得不提到两个属性:stroke-dasharray(这个前面有提到,做虚线的)stroke-dashoffset (这个是关键). 先说说stroke-dasharray 之前提过 可以把线条做成虚线状,值可以为一个数值 也可以是一个数组.详见:SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 最后一段.在动画里 stroke-dasharray 用来绘制路径或者虚线环绕效果. stroke-dashoffset : 官方解释 svg的

svg学习与体会

svg 学习和体会 1:适用范围,支持html5的浏览器,ie9+,chrome等浏览器.

Gradle 编译学习笔录

Gradle下载与配置 下载路径: http://www.gradle.org/downloads 配置: 下载完gradle后, 解压缩到你的目录盘, 然后打开gradle的bin目录并将其路径复制, 打开环境变量, 将复制的内容加到Path中. 配置完毕后,可以打开cmd命令工具, 运行gradle –version 如果出现正确的版本号 那么将配置成功 ! Gradle简单命令介绍 build 编译命令: 使用cmd命令进入到项目目录下, 然后运行gradle build . 编译成功后可

svg学习心得一

之前一直看别人写的各种svg动画,画的svg图画,感觉好炫酷,也感觉好难,总有一种无法入手的感觉.但最近由于工作需要,要做一些小动画,要模仿app的原生的,就做了一些尝试及学习.下面是我的一些学习心得: 要做svg动画,就要首先了解一下svg动画的过程 以圆形缓冲加载动画为例: 首先要确定画布的位置: 画一个底边圆 画一个加载的圆 <svg xmlns="" version="1.1" id="my_appointment" width=&

SVG学习心得

在前端开发的过程中,为了界面的美观,会用到很多好看但无法纯利用HTML和CSS实现的图形(对于大佬们这就不算事了,但对于我这个刚入行的后生就难了),如下面的几个图形,如果不用美工妹妹的PS图片,我个人觉得是比较难实现的: 以上的图形利用纯HTML和CSS是比较难实现的,幸好前段时间刚好看到有篇关于SVG的实例讲解,学习了一下SVG,下面是我的学习心得(这是我第一次写博客,写的不好多多见谅) 1.什么是SVG?(这里引用w3school的定义) SVG 指可伸缩矢量图形 (Scalable Vec