HTML5内联SVG | 易学教程

1.SVG是可伸缩矢量图形（Scalable Vector Graphics）,用于定语网络的矢量图形，使用XML格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失。
优势：
与其他图像格式相比（jpeg和gif）

1.图像通过文本编辑器来创建和修改
2.图像可以被搜索，索引，脚本化或压缩
3.可伸缩的
4.图像在任何分辨率下呗高质量的打印
5.图像质量不下降的情况下被放大

2.SVG与Canvas两者间的区别

SVG使用XML描述二维的图像的语言
Canvas通过javascript来绘制二维图形
SVG基于XML，这意味着SVG DOM中每个元素都是可用的，可以为某个元素附加javascript事件处理器
在SVG中，每个被绘制的图形都被视为对象。如果对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas是逐个像素渲染的，一旦被绘制完成，不会继续得到浏览器的关注。如果位置发生变化，整个场景也需要重新绘制。

这里写图片描述
3.在页面中添加SVG
内联方式：

<body>
<svg width="200" height="200">
</svg>
</body>

外联方式：通过<img>元素，在html中导入外部svg文件，缺点是无法编写与svg元素进行交互的脚本。

<img src="example.svg" />

4.svg绘制图形
矩形：x,y为起点的位置，然后定义宽和高
这里写图片描述

<body>
 <svg width="200" height="200">
 <rect x="50" y="20" width="100" height="50" stroke="blue" fill="green"></rect>
 </svg>
</body>

svg绘制对象是按对象在文档中出现的顺序进行的。如果画完矩形之后画圆形，那么圆形会显示在矩形之上。
这里写图片描述

 <svg width="200" height="200">
 <rect x="50" y="20" width="100" height="50" stroke="blue" fill="green"></rect>
 <circle cx="120" cy="80" r="40" stroke="black" fill="none" stroke-width="8"></circle>>
 </svg>

这里写图片描述

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

6.变换svg元素
svg中可以将多个元素结合起来。使他们形成一个组，变为一个整体。
<g>元素代表组，可以用来结合多个相关的元素。组内成员可以通过ID来引用。此外，组也可以作为一个整体进行变换，如果你为组添加了变换属性，那么组中所有内容都会进行变换。变换属性包括旋转，变形，缩放，剪切。
这里写图片描述

 <svg width="200" height="200">
 <g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup">
  <rect x="50" y="20" width="100" height="50" stroke="blue" fill="green"></rect>
 <circle cx="120" cy="80" r="40" stroke="black" fill="none" stroke-width="8"></circle>
 </g>
 </svg>

7.复用内容
svg中的<defs>元素用于定义留待将来使用的内容。可以用<use>元素将<defs>定义的内容链接到需要展示的地方。借助这两个元素，可以多次复用同一内容，消除冗余。
这里写图片描述

<svg width="400" height="400">
  <defs>
    <g  id="ShapeGroup">
      <rect x="50" y="20" width="100" height="50" stroke="blue" fill="green"></rect>
      <circle cx="120" cy="80" r="40" stroke="black" fill="none" stroke-width="8"></circle>
    </g>
  </defs>
  <use xlink:href="#ShapeGroup" transform="translate(60,0) scale(0.4)"></use>
  <use xlink:href="#ShapeGroup" transform="translate(120,80) scale(0.75)"></use>
  <use xlink:href="#ShapeGroup" transform="translate(20,60) scale(0.25)"></use>
</svg>

8.文本

 <svg width="200" height="200">
        <text x="10" y="80" font-family="Droid Sans" stroke="#00f" fill="#00f"
            font-size="40px" font-weight="bold">Hello SVG</text>
    </svg>

来源：CSDN

作者：刘小妞

链接：https://blog.csdn.net/liuwengai/article/details/51660948

标签

svg

html5

矢量图