2020-03-20 SVG入门

2020-03-21 本文已影响0人 Rockage

SVG 是使用 XML 来描述二维图形和绘图程序的语言。它可以通过<SVG>标签嵌入HTML文档，也可以用<IMG SRC="file.svg">来引用。
下面举一个很常见的例子，即鼠标悬浮改变图片颜色，通常，如果我们采用JS来做这件事情的话，会设置两张图片，通过代码来对悬浮/离开这两种状态进行图片切换。但如果采用SVG方案则不需要任何JS代码，矢量图片本身就可以实时动态变化，我们只需要通过CSS修改其中相关的属性即可。
首先是制作一张SVG矢量图，可以通过这个网站创建一些简单的图片：
https://c.runoob.com/more/svgeditor/
画好之后，选择【视图】【代码】生成SVG代码，把这些代码嵌入HTML文档就可以直接显示了。另外，也可以通过【文件】【保存】将图形保存为一个SVG文件，在使用上这个文件和普通的jpeg、png等没有太大区别。
image.png
下面以代码方式进行实验，这是刚才那幅爱心图的代码：

<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
 <g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="52" width="52" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <path id="svg_3" d="m25,18.42834c5.97828,-14.96314 29.40138,0 0,19.23833c-29.40138,-19.23833 -5.97828,-34.20147 0,-19.23833z" stroke-width="1.5" stroke="#000" fill="#FFAFCC"/>
 </g>
</svg>

在上面这些代码中，就本例而言，真正最关键的是<path d="...">这一行，d是data的意思，也就是构成整个爱心轮廓的矢量数据。为了方便起见，本例中删除了一些与本例不相关的代码，经过整理的代码如下，将它嵌入任何支持HTML5的浏览器中即可运行：

<svg>
<style>
     #mysvg:hover { fill: red; }
</style>
  <g id = "mysvg">
  <rect fill="white" height="52" width="52" y="-1" x="-1"/>
  <path d="m25,18.42834c5.97828,-14.96314 29.40138,0 0,19.23833c-29.40138,-19.23833 -5.97828,-34.20147 0,-19.23833z" />
 </g>
</svg>

效果：当鼠标移动到爱心上面时，变成红心。
要点：

<rect>是矩形框，它在本例的作用是产生一个白色的背景。
<path>是矢量路径，它构成了爱心的轮廓。
<g>是元素分组，它将背景和爱心归为一组，当鼠标悬浮的时候爱心将整体变成红色，如果没有这个分组，则鼠标悬浮在爱心的“中空位置”时，不会触发hover效果。
#mysvg:hover { fill: red; }，这个就不赘述了，它属于CSS伪类的常规使用方法。

2020-03-20 SVG入门

猜你喜欢

热点阅读