百分百源码网-让建站变得如此简单！ 登录 注册 签到领金币！

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> HTML5怎样运用SVG（代码示例）-
分享文章到：

HTML5怎样运用SVG（代码示例）-

发布时间：09/01 来源：未知 浏览： 关键词：
本篇文章给大家带来的内容是对于HTML5怎样运用SVG（代码示例），有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。? 本篇文章给大家带来的内容是对于HTML5怎样运用SVG（代码示例），有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

代码优化永远是程序员亘古不变的需求，而合理的应用SVG图片来取代局部PNG/JPG等格局的图片则是前端优化重要的一环，既然是优化，那我们先来看看SVG图片都是什么优势：

  • SVG 可被非常多的工具读取和修改（比方记事本）

  • SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可紧缩性更强。

  • SVG 是可伸缩的

  • SVG 图像可在任何的辨论率下被高质量地打印

  • SVG 可在图像质量不下落的状况下被放大

  • SVG 图像中的文本是可选的，同时也是可搜寻的（很适合制作地图）

  • SVG 可以与 Java 技术一起运转

  • SVG 是开放的规范

  • SVG 文件是纯粹的 XML

几个SVG图片小例子：

我们来看一下第三个分享图标的代码：

不理解SVG的同窗此刻一定一脸问号，就跟我首先次见他们同样，别焦急，我们从根基看起。

什么是SVG？

SVG 是一种基于 XML 语法的图像格局，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格局都是基于像素处置的，SVG 则是属于对图像的外形描述，所以它本质上是文本文件，体积较小，且无论放大多少倍都不会失真。此外SVG 是万维网同盟的规范，SVG 与诸如 DOM 和 XSL 之类的 W3C 规范是一个整体。

怎么运用？

在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中,例如上面的那颗小红心：

SVG 代码也可以写在一个以.svg结尾的文件中，然后用、、、

CSS也可以运用svg

.logo {
  background: url(logo.svg);
}

SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页。

SVG的语法

1. 标签

SVG 代码都放在顶层标签之中。下面是一个例子。

的width属性和height属性，指定了 SVG 图像在 HTML 元素中所占领的宽度和高度。除了相对单位，也可以采纳绝对单位（单位：像素）。要是不指定这两个属性，SVG 图像默许大小是300像素（宽） x 150像素（高）。

要是只想展现 SVG 图像的一局部，就要指定viewBox属性。

属性的值有四个数字，离别是左上角的横坐标和纵坐标、视口的宽度和高度。上面代码中，SVG 图像是100像素宽 x 100像素高，viewBox属性指定视口从(50, 50)这个点开端。所以，现实看到的是右下角的四分之一圆。

注意，视口必需适配所在的空间。上面代码中，视口的大小是 50 x 50，因为 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG 图像的大小，即放大了四倍。

要是不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默许大小将等于所在的 HTML 元素的大小。

2. 标签
标签代表圆形。

上面的代码定义了三个圆。标签的cx、cy、r属性离别为横坐标、纵坐标和半径，单位为像素。坐标都是相关于画布的左上角原点。

class属性用来指定对应的 CSS 类。

.red {
  fill: red;
}

.fancy {
  fill: none;
  stroke: black;
  stroke-width: 3pt;
}

SVG 的 CSS 属性与网页元素有所不一样。

fill：添补色
stroke：描边色
stroke-width：边框宽度

3. 标签
标签用来绘制直线。

上面代码中，标签的x1属性和y1属性，表示线段起点的横坐标和纵坐标；x2属性和y2属性，表示线段终点的横坐标和纵坐标；style属性表示线段的样式。

4. 标签
标签用于绘制一根折线。

的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。

5. 标签
标签用于绘制矩形。

的x属性和y属性，指定了矩形左上角端点的横坐标和纵坐标；width属性和height属性指定了矩形的宽度和高度（单位像素）。

6. 标签
标签用于绘制椭圆。

的cx属性和cy属性，指定了椭圆核心的横坐标和纵坐标（单位像素）；rx属性和ry属性，指定了椭圆横向轴和纵向轴的半径（单位像素）。

7. 标签
标签用于绘制多边形。

的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。

8. 标签

标签用于制途径。

的d属性表示绘制次序，它的值是一个长字符串，每个字母表示一个绘制行动，背面跟着坐标。

M：挪移到（moveto）
L：画直线到（lineto）
Z：闭合途径

9. 标签

标签用于绘制文本。


  肆客脚球

的x属性和y属性，表示文本区块基线（baseline）起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。

10. 标签

标签用于复制一个外形。

的href属性指定所要复制的节点，x属性和y属性是左上角的坐标。别的，还可以指定width和height坐标。

11. 标签

标签用于将多个外形组成一个组（group），利便复用。


  
    圆形

12. 标签

标签用于自定义外形，它内部的代码不会显示，仅供援用。


  
    
      圆形

13. 标签
标签用于自定义一个外形，该外形可以被援用来平铺一个区域。

上面代码中，标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示的宽度和长度是现实的像素值。然后，指定这个模式去添补下面的矩形。

14. 标签
标签用于插入图片文件。

上面代码中，的xlink:href属性表示图像的来源。

15. 标签
标签用于发生动画结果。

上面代码中，矩形会一直挪移，发生动画结果。

的属性含义如下。

attributeName：产生动画结果的属性名。
from：单次动画的初始值。
to：单次动画的完毕值。
dur：单次动画的延续工夫。
repeatCount：动画的轮回模式。
可以在多个属性上面定义动画。

16. 标签
标签对 CSS 的transform属性不起作用，要是需要变形，就要运用标签。

  
    
  

上面代码中，的结果为扭转（rotate），这时from和to属性值有三个数字，首先个数字是角度值，第二个值和第三个值是扭转核心的坐标。from="0
 200 200"表示开端时，角度为0，环绕(200, 200)开端扭转；to="360 400 
400"表示完毕时，角度为360，环绕(400, 400)扭转。
JavaScript 操纵SVG
1. DOM操纵
要是 SVG 代码直接写在 HTML 网页之中，它就成为网页 DOM 的一局部，可以直接用 DOM 操纵。

  

上面代码插入网页之后，就可以用 CSS 定制样式。
circle {
  stroke-width: 5;
  stroke: #f00;
  fill: #ff0;
}

circle:hover {
  stroke: #090;
  fill: #f8f8f8;
}
然后，可以用 JavaScript 代码操纵 SVG。
var mycircle = document.getElementById('mycircle');

mycircle.addEventListener('click', function(e) {
  console.log('circle clicked - enlarging');
  mycircle.setAttribute('r', 60);
}, false);
上面代码指定，要是点击图形，就改写circle元素的r属性。
2. 猎取 SVG DOM
运用、