立即注册 登录
PhoneGap中文网 返回首页

zcysyr的个人空间 http://www.phonegap100.com/?65806 [收藏] [复制] [RSS]

日志

svg初体验

已有 1428 次阅读2016-4-20 11:14 |个人分类:前端

http://www.hubwiz.com/class/5636b7041bc20c980538e995

SVG 实例

下面的例子是一个简单的 SVG 文件的例子。SVG 文件必须使用 .svg 后缀来保存：

  1. <?xml version="1.0" standalone="no"?>
  2.  
  3. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4. <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  5. <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
  6. </svg>

HTML 页面中的 SVGSVG 文件可通过以下标签嵌入 HTML 文档：< embed > 、< object > 或者 < iframe >。

三种把 SVG 文件嵌入 HTML 页面的不同方法。

使用 < embed > 标签

< embed > 标签被所有主流的浏览器支持，并允许使用脚本。

注释：当在 HTML 页面中嵌入 SVG 时使用 < embed > 标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用 < embed >。任何 HTML 规范中都没有 < embed > 标签。

语法：

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

注释：pluginspage 属性指向下载插件的 URL。

使用 < object > 标签

< object > 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。

注释：假如您安装了最新版本的 Adobe SVG Viewer，那么当使用 < object > 标签时 SVG 文件无法工作（至少不能在 IE 中工作）！

语法：

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

注释：codebase 属性指向下载插件的 URL。

使用 < iframe > 标签

< iframe > 标签可工作在大部分的浏览器中。

语法：

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




SVG椭圆

ellipse 标签可用来创建椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的。

  1. <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  2. <ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>
  3. </svg>

SVG 线条

line 标签用来创建线条。

  1. <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  2. <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
  3. </svg>







SVG 折线

polyline 标签用来创建仅包含直线的形状。它是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个points属性中：

  1. <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  2. <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>
  3. </svg>


SVG 滤镜简介

　　所有互联网的SVG滤镜定义在 < defs > 元素中， < filter > 标签用来定义SVG滤镜， < filter > 标签使用必须的ID属性来定义向图形应用到那个滤镜中

在 SVG 中，可用的滤镜有：

  • feBlend SVG 滤镜。使用不同的混合模式把两个对象合成在一起。
  • feColorMatrix SVG 滤镜。应用matrix转换。

  1. <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  2. <defs>
  3. <filter id="Gaussian_Blur">
  4. <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
  5. </filter>
  6. </defs>
  7. <ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>
  8. </svg>

代码解释：

  • < filter > 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
  • filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
  • 滤镜效果是通过 < feGaussianBlur > 标签进行定义的。fe 后缀可用于所有的滤镜
  • < feGaussianBlur > 标签的 stdDeviation 属性可定义模糊的程度
  • in="SourceGraphic" 这个部分定义了由整个图像创建效果

SVG 阴影效果

feOffset 元素用于创建阴影效果

偏移一个矩形（带 < feOffset > ），然后混合偏移图像顶部(含 < feBlend > )

SVG代码：

  1. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  2. <defs>
  3. <filter id="f1" x="0" y="0" width="200%" height="200%">
  4. <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
  5. <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
  6. </filter>
  7. </defs>
  8. <rect width="90" height="90" stroke="green" stroke-width="3"
  9. fill="yellow" filter="url(#f1)" />
  10. </svg>
  • < filter > 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
  • filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符



SVG 线性渐变

　　渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。

在 SVG 中，有两种主要的渐变类型：

  • 线性渐变
  • 放射性渐变

< linearGradient > 可用来定义 SVG 的线性渐变。

< linearGradient > 标签必须嵌套在 < defs > 的内部。< defs > 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。

线性渐变可被定义为水平、垂直或角形的渐变：

  • 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
  • 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
  • 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
  1. <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  2. <defs>
  3. <linearGradient id="orange-red" x1="0%" y1="0%" x2="100%" y2="0%">
  4. <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
  5. <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
  6. </linearGradient>
  7. </defs>
  8. <ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange-red)"/>
  9. </svg>

代码解释：

  • < linearGradient > 标签的 id 属性可为渐变定义一个唯一的名称
  • fill:url(#orange-red) 属性把 ellipse 元素链接到此渐变
  • < linearGradient > 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
  • 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 < stop > 标签来规定。offset 属性用来定义渐变的开始和结束位置。


SVG 放射渐变

< radialGradient > 用来定义放射性渐变。

  1. <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  2. <defs>
  3. <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
  4. <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
  5. <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
  6. </radialGradient>
  7. </defs>
  8. <ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>
  9. </svg>

代码解释：

　　< radialGradient > 标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey-blue) 属性把 ellipse 元素链接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 < stop >标签来规定。offset 属性用来定义渐变的开始和结束位置。




SVG 放射渐变

< radialGradient > 用来定义放射性渐变。

  1. <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  2. <defs>
  3. <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
  4. <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
  5. <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
  6. </radialGradient>
  7. </defs>
  8. <ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>
  9. </svg>

代码解释：

　　< radialGradient > 标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey-blue) 属性把 ellipse 元素链接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 < stop >标签来规定。offset 属性用来定义渐变的开始和结束位置。



SVG 路径简介

path可能是SVG中最常见的形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。

path元素的形状是通过属性d定义的，属性d的值是一个“命令+参数”的序列

下面的命令可用于路径数据：

  • M/m = moveto 移动当前位置
  • L/l = lineto 从当前位置绘制线段到指定位置
  • H/h = horizontal lineto 从当前位置绘制水平线到达指定的x 坐标
  • V/v = vertical lineto 从当前位置绘制竖直线到达指定的y 坐标
  • C/c = curveto 从当前位置绘制三次贝塞尔曲线到指定位置
  • S/s = smooth curveto 从当前位置光滑绘制三次贝塞尔曲线到指定位置
  • Q/q = quadratic Belzier curve 从当前位置绘制二次贝塞尔曲线到指定位置
  • T/t = smooth quadratic Belzier curveto 从当前位置光滑绘制二次贝塞尔曲线到指定位置
  • A/a = elliptical Arc 从当前位置绘制弧线到指定位置
  • Z/z = closepath 闭合当前路径

每一个命令都用一个关键字母来表示，比如，字母“M”表示的是“Move to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点。跟在命令字母后面的，是你需要移动到的那个点的x和y轴坐标。比如移动到(10,10)这个点的命令，应该写成“M 10 10”。这一段字符结束后，解析器就会去读下一段命令。

注释：

  • 区分大小写：大写表示坐标参数为绝对位置，小写则为相对位置 （例如：从上一个点开始，向上移动10px，向左移动7px）
  • 最后的参数表示最终要到达的位置
  • 上一个命令结束的位置就是下一个命令开始的位置
  • 命令可以重复参数表示重复执行同一条命令。

画一个80*80的正方形实例

  1. <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>











< text > 及其属性

　　在SVG中有两种截然不同的文本模式. 一种是写在图像中的文本，另一种是SVG字体。现在我们主要集中前者：写在图像中的文本。

在一个SVG文档中，元素内部可以放任何的文字。

  1. <text x="10" y="10">Hello World!

　　属性x和属性y性决定了文本在视口中显示的位置。属性text-anchor，可以有这些值：start、middle、end或inherit，允许决定从这一点开始的文本流的方向。

　　和形状元素类似，属性fill可以给文本填充颜色，属性stroke可以给文本描边，形状元素和文本元素都可以引用渐变或图案, 相比较CSS2.1只能绘制简单的彩色文字，SVG显得更具有优势。

设置字体属性

　　文本的一个至关重要的部分是它显示的字体。SVG提供了一些属性，类似于它们的CSS同行，用来激活文本选区。下列每个属性可以被设置为一个SVG属性或者成为一个CSS声明：font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration。








tspan

该元素用来标记大块文本的子部分，它必须是一个text元素或别的tspan元素的子元素。一个典型的用法是把句子中的一个词变成粗体红色。

  1. <text>
  2. <tspan font-weight="bold" fill="red">This is bold and red</tspan>

tspan元素有以下的自定义属性：

x:为容器设置一个新绝对x坐标。它覆盖了默认的当前的文本位置。这个属性可以包含一个数列，它们将一个一个地应用到tspan元素内的每一个字符上。

dx:从当前位置，用一个水平偏移开始绘制文本。这里，你可以提供一个值数列，可以应用到连续的字体，因此每次累积一个偏移。

此外还有属性y和属性dy作垂直转换。

rotate:把所有的字符旋转一个角度。如果是一个数列，则使每个字符旋转分别旋转到那个值，剩下的字符根据最后一个值旋转。

textLength:这是一个很模糊的属性，给出字符串的计算长度。它意味着如果它自己的度量文字和长度不满足这个提供的值，则允许渲染引擎精细调整字型的位置。







路径文本

除了笔直地绘制一行文字以外， SVG 也可以根据 < path > 元素的形状来放置文字。 只要在textPath元素内部放置文本，并通过其xlink:href属性值引用< path > 元素，我们就可以让文字块呈现在< path > 元素给定的路径上了。

使用方法：

  1. <path id="my_path" d="M 100 200 Q 200 100 300 200 T 500 200" stroke="rgb(0,255,0)" fill="none" />
  2. <text>
  3. <textPath xlink:href="#my_path">This text follows a curve.</textPath>
  • startOffset 属性 确定排列起始
  • dx, dy 属性 切线和法线方向的偏移



< a > - 超链接
  • 可以添加到任意的图形上
  • xlink:href 指定连接地址
  • xlink:title 指定连接提示
  • target 指定打开目标
  1. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
  2. <a xlink:href="http://www.hubwiz.com" target="_blank">
  3. <text x="0" y="15" fill="red">I love 汇智网
  5. </svg>



用opacity定义透明度

有一个简单方法可以用来为整个元素设置透明度。它就是opacity属性：

  1. <rect x="0" y="0" width="100" height="100" opacity=".5" />

　　上面的矩形将绘制为半透明。还有两个分开的属性fill-opacity和stroke-opacity，分别用来控制填充和描边的不透明度。注意，描边将绘制在填充的上面。因此，如果你在元素上设置了一个描边透明度，它同时还有填充，则填充将在描边上透过一半，另一半背景也将出现：

  1. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  2. <rect x="0" y="0" width="200" height="200" fill="blue" />
  3. <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" />
  4. </svg>
创建剪切

clip-path属性是指定一个应用到元素上的剪切路径。应用在SVG中 < clipPath > 元素上的属性值可以完全运用在clip-path的属性上。

我们在一个圆形的基础上创建上面提到的半径形：

  1. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  2. <defs>
  3. <clipPath id="cut-off-bottom">
  4. <rect x="0" y="0" width="200" height="100" />
  5. </clipPath>
  6. </defs>
  7.  
  8. <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
  9. </svg>

在(100,100)创建一个圆形，半径是100。属性clip-path引用了一个带单个rect元素的< clipPath >元素。它内部的这个矩形将把画布的上半部分涂黑。

注意，clipPath元素经常放在一个defs元素内。

　　然而，该rect不会被绘制。它的象素数据将用来确定：圆形的哪些像素需要最终呈现出来。因为矩形只覆盖了圆形的上半部分，所以下半部分将消失了(右图示例)；现在我们已经有了一个半圆形，不用处理弧形路径元素。对于这个剪切，clipPath内部的每个路径都会被检查到、与它的描边属性一起被估值、变形。然后目标的位于clipPath内容的结果的透明度区域的每一块都不会呈现。颜色、不透明度都没有这种效果，因为它们不能让一部分彻底消失。

继续学习 


头晕
不解
扯淡
搞笑
欠扁
超赞
支持
难过
收藏 邀请 举报

全部作者的其他最新日志

评论 (0 个评论)

facelist

您需要登录后才可以评论 登录 | 立即注册

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-4-26 01:21 , Processed in 0.043701 second(s), 23 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部