svg的初步尝试

牧灵泉的崖巢

2011-07-21

关注关注

1.什么是svg?

以下是百度百科的解释。

可缩放矢量图形（ScalableVectorGraphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。

2.怎么用？

先提几个问题：

a.怎样绘制svg图形？

b.svg怎么用在网页上？

c.svg怎么和html进行交互？

a.怎样绘制svg图形？

这里就请到http://www.w3school.com.cn/svg/svg_inhtml.asp

b.svg怎么用在网页上？

这里有几种方法：

1.embed标签

这个在w3里面有提到，这里省略

2.直接以标签形式使用

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg">
  <head>
  </head>
<body>
  <h3>在html里面直接添加svg</h3>
  <hr />
  <svg:svg id='diagram' version="1.1" width="600" height="220">
    <svg:g id="svgele" onclick="svgctrl()">
    <svg:rect
       style="fill:#ff0067;fill-opacity:1;fill-rule:nonzero;stroke:#00d1ff;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
       id="rect2816"
       width="120"
       height="32.142857"
       x="7.1428571"
       y="6.6478992" />
    <svg:a
       id="a3618"
       transform="translate(-7.5714286,-21.428571)">
      <svg:text
         transform="scale(1.2412467,0.80564161)"
         id="text3610"
         y="60.196808"
         x="17.778425"
         style="font-size:21px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
         xml:space="preserve">I'm svg</svg:text>
    </svg:a> 
  </svg:g>
  </svg:svg> 
</body>
</html>

不要被svg的东西吓到，那不是我敲的，是我用工具画了之后复制过来的，当然也经过稍微的修改。svg的绘制工具很多，我用的是Inkscape.

每个svg的标签前面加个svg:标识就可以了，这个很简单

c.svg怎么和html进行交互？

svg现在也能够利用js进行操控，这里贴出个自己写的小demo

(jquery也有对svg的支持，可惜没有找到详细说明的api，看源码也有点吃力)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg">
  <head>
    <title>use svg to control html</title>
    
    <style type="text/css"><![CDATA[
    #diagram
    {
      border: solid;
    }
    
    #svgele
    {
      cursor: pointer;  
    }
    
    ]]></style>
    <script type="application/javascript"><![CDATA[
      function svgctrl()
      {
        var htmlEle = document.getElementById("htmlele");
        htmlEle.innerHTML = "I have been changed！";
      }
    ]]></script>
</head>
<body>
  <h3>svg元素触发事件操作html元素标签</h3>
  <hr />
  <svg:svg id='diagram' version="1.1" width="600" height="220">
    <svg:title>Create circles dynamically</svg:title>
    <svg:g id="svgele" onclick="svgctrl()">
    <svg:rect
       style="fill:#ff0067;fill-opacity:1;fill-rule:nonzero;stroke:#00d1ff;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
       id="rect2816"
       width="120"
       height="32.142857"
       x="7.1428571"
       y="6.6478992" />
    <svg:a
       id="a3618"
       transform="translate(-7.5714286,-21.428571)">
      <svg:text
         transform="scale(1.2412467,0.80564161)"
         id="text3610"
         y="60.196808"
         x="17.778425"
         style="font-size:21px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
         xml:space="preserve">Click me</svg:text>
    </svg:a> 
  </svg:g>
  </svg:svg> 
<p id="htmlele">I'm html element</p>
</body>
</html>

如果想直接看效果，请注意将文件后缀名写为.svg而不是.html

引用的格式和html大同小异，可以看到，如果能与html元素进行交互了，实际上就可以将svg看做成html的成员了，这样，能做的事情就很多了，可以自由想象发挥。

更详细的说明可以参考这里：

http://www.ibm.com/developerworks/cn/education/xml/x-dynamicsvg/section3.html

3.适用范围

我现在只能用这些提到的操作使得我的网页更加美观一点，svg用处很多，网上说是没有svg绘制不了的东西，svg的确很好玩，有时间还要多研究研究。

svg xml语言矢量图 svg格式