svg的初步尝试

最新推荐文章于 2024-07-25 08:00:00 发布

SwineXSH

最新推荐文章于 2024-07-25 08:00:00 发布

阅读量195

点赞数

分类专栏： web 文章标签： HTML svg

本文链接：https://blog.csdn.net/SwineX00/article/details/83974578

版权

web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

[size=xx-large]1.什么是svg?[/size]
以下是百度百科的解释。

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

[size=xx-large]2.怎么用？[/size]
先提几个问题：
a.怎样绘制svg图形？
b.svg怎么用在网页上？
c.svg怎么和html进行交互？

[size=large]a.怎样绘制svg图形？[/size]
这里就请到[url]http://www.w3school.com.cn/svg/svg_inhtml.asp[/url]

[size=large]b.svg怎么用在网页上？[/size]
这里有几种方法：
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:标识就可以了，这个很简单

[size=large]c.svg怎么和html进行交互？[/size]
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的成员了，这样，能做的事情就很多了，可以自由想象发挥。

更详细的说明可以参考这里：
[url]http://www.ibm.com/developerworks/cn/education/xml/x-dynamicsvg/section3.html[/url]

[size=xx-large]3.适用范围[/size]
我现在只能用这些提到的操作使得我的网页更加美观一点，svg用处很多，网上说是没有svg绘制不了的东西，svg的确很好玩，有时间还要多研究研究。