HTML5的内联SVG

最新推荐文章于 2021-06-07 13:49:48 发布

转载最新推荐文章于 2021-06-07 13:49:48 发布 · 501 阅读

文章标签：

#转载自

什么是svg?

1、svg指可伸缩矢量图形

2、svg用于定义用于网络的基于矢量的图形

3、svg使用xml格式定义图形

4、svg图像在放大和改变尺寸的情况下图形质量不会有损失

5、svg是万维网联盟的标准

svg的优势？

与其它图像格式相比（比如jpeg和gif），使用svg的优势在于

1、svg的图像可通过文本编辑器来创建和修改

2、svg图像可被搜索、索引、脚本化或者压缩

3、svg是可伸缩的

4、svg在任何分辨率下都可被高质量的打印

5、svg可在图像质量不下降的情况下被放大

svg和canvas的比较？

canvas

1、依赖分辨率 2、不支持事件处理器 3、弱的文本渲染能力 4、能够以.png和.jpg格式保存图像 5、最适合图像密集型游戏，其中许多对象需要被频繁重绘

svg

1、不依赖分辨率 2、支持事件处理器 3、最适合带有大型渲染区域的应用程序（比如谷歌地图）4、复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 5、不适合游戏应用

svg语法

1、在html里内联svg

   [html] 
   view plaincopy
<svg  <span class="hl-var" style="border:0px;margin:0px;padding:0px;color:rgb(0,0,139);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">xmlns</span><span class="hl-code" style="border:0px;margin:0px;padding:0px;color:#808080;font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">=</span><span class="hl-quotes" style="border:0px;margin:0px;padding:0px;color:rgb(139,0,0);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">"</span><span class="hl-string" style="border:0px;margin:0px;padding:0px;color:rgb(170,17,17);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">http://www.w3.org/2000/svg</span><span class="hl-quotes" style="border:0px;margin:0px;padding:0px;color:rgb(139,0,0);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">"</span><span class="hl-code" style="border:0px;margin:0px;padding:0px;color:#808080;font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;"> </span><span class="hl-var" style="border:0px;margin:0px;padding:0px;color:rgb(0,0,139);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">version</span><span class="hl-code" style="border:0px;margin:0px;padding:0px;color:#808080;font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">=</span><span class="hl-quotes" style="border:0px;margin:0px;padding:0px;color:rgb(139,0,0);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">"</span><span class="hl-string" style="border:0px;margin:0px;padding:0px;color:rgb(170,17,17);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">1.1</span><span class="hl-quotes" style="border:0px;margin:0px;padding:0px;color:rgb(139,0,0);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">"</span>   width="400" height="600">      </svg>  

2、svg图形写在<defs></defs>里面，再通过 <use xlink:href="#你定义图形的id"/>调用在<defs></defs>里的图形不显示

3、在svg里定义多个种类图形的时候可以通过<g></g>分类

4、

   [html] 
   view plaincopy
<rect id="tree_g"  x="15" y="120" width="10"  height="50"  />  

x和y是矩形左上角坐标 width和height是矩形的长和宽

<path d="M 20,20

L 20,30

L 40,10

Z"/>M是起始点 L是线段这个标签用来自定义图形

<text>你的文本</text> 用来定义文本

svg实例

   [html] 
   view plaincopy
<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style>  
            svg  
            {  
                border: black;  
                border-style: solid;  
            }  
        </style>  
        <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">  
        </script>  
          
          
          
    </head>  
    <body>  
          
        <button id="add" onclick="f()">添加</button>  
        <svg  <span class="hl-var" style="border:0px;margin:0px;padding:0px;color:rgb(0,0,139);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">xmlns</span><span class="hl-code" style="border:0px;margin:0px;padding:0px;color:#808080;font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">=</span><span class="hl-quotes" style="border:0px;margin:0px;padding:0px;color:rgb(139,0,0);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">"</span><span class="hl-string" style="border:0px;margin:0px;padding:0px;color:rgb(170,17,17);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">http://www.w3.org/2000/svg</span><span class="hl-quotes" style="border:0px;margin:0px;padding:0px;color:rgb(139,0,0);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">"</span><span class="hl-code" style="border:0px;margin:0px;padding:0px;color:#808080;font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;"> </span><span class="hl-var" style="border:0px;margin:0px;padding:0px;color:rgb(0,0,139);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">version</span><span class="hl-code" style="border:0px;margin:0px;padding:0px;color:#808080;font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">=</span><span class="hl-quotes" style="border:0px;margin:0px;padding:0px;color:rgb(139,0,0);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">"</span><span class="hl-string" style="border:0px;margin:0px;padding:0px;color:rgb(170,17,17);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">1.1</span><span class="hl-quotes" style="border:0px;margin:0px;padding:0px;color:rgb(139,0,0);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;font-size:13.2px;line-height:18.48px;white-space:pre-wrap;">"</span>   width="400" height="600">  
            <defs>  
              
            <pattern id="ll" patternUnits="userSpaceOnUse" x="0" y="300" width="100" height="27"  
                vieeBox="0 300 100 67">  
            <image x="0",y="300" width=100 height=67 xlink:href="img/l.jpg"/>  
            </pattern>  
            <g id="tree"> <!--树和树干 -->  
                <path   
                    d="M 20,30  
                    L 30,60  
                    L 25,60  
                    L 35,90  
                    L 30,90  
                    L 40,120  
                    L 0,120  
                    L 10,90  
                    L 5,90  
                    L 15,60  
                    L 10,60  
                    Z" id="tree_head"   
                    />  
                      
                    <rect id="tree_g"  x="15" y="120" width="10"  height="50"  />  
                </g>  
                  
                  
                <g id="treeshadow">  
                    <use xlink:href="#tree_head" fill="grey"/>  
                    <use xlink:href="#tree_g" fill="grey"/>  
                </g>  
                  
                  
            </defs>  
              
            <g stroke-width="20"  
                stroke-linejoin="round"  
                stroke="url(#ll)"  
                >  
                  <path  d="M0,300 Q150,100 200,200 Q300,300 400,60" fill="none"/>  
            </g>  
              
            <g>  
                <text x="80" y="100" font-size="40px" font-family="Droid Sans" stroke="#00f" fill="#0ff" font-weight="bold">  
                    Select this text!  
                </text>  
                  
                <text id="tc" x="80" y="140" font-size="40px" font-family="Droid Sans" stroke="#00f" fill="#0ff" font-weight="bold"  >  
                </text>  
                  
            </g>  
            <g id="ctree">  
            <use xlink:href="#tree_head"  stroke=none fill="#339900"/>  
            <use xlink:href="#tree_g"  stroke=none fill="#552200"/>  
            </g>  
            <use xlink:href="#tree_head" transform="translate(200,250) scale(2,2)" stroke=none fill="#339900"/>  
            <use xlink:href="#tree_g" transform="translate(200,250) scale(2,2)" stroke=none fill="#552200"/>  
            <use xlink:href="#treeshadow" transform="translate(60,68) scale(1,0.6) skewX(-18)"/>  
            <use xlink:href="#treeshadow" transform="translate(375,370) scale(1,1.3) skewX(-40)"/>  
              
        </svg>  
          
          
          
        <script>  
              
            function removeTree(e)  
            {  
                var elt=e.target;  
                if(elt.correspondingUseElement)  
                {  
                    elt=elt.correspondingUseElement;  
                }  
                elt.parentNode.removeChild(elt);  
                updateTress();  
            }  
              
            function f(){  
            var x=Math.floor(Math.random() *400);  
            var y=Math.floor(Math.random() *600);  
            var scale=Math.random() + .5;  
            var translate="translate("+x+","+y+")";  
            var tree=document.createElementNS("http://www.w3.org/2000/svg","use");  
            tree.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#ctree");  
            tree.setAttribute("transform",translate+"scale("+scale+")");  
            document.querySelector("svg").appendChild(tree);  
            updateTress();    
         }  
              
              
            function updateTress()  
            {  
                var list=document.querySelectorAll("use");  
                var treeCount=0;  
                for(var i=0;i<list.length;i++)  
                {  
                    if(list[i].getAttribute("xlink:href")=="#ctree")  
                    {  
                        treeCount++;  
                        list[i].onclick=removeTree;  
                    }  
                }  
                var co=document.getElementById("tc");  
            co.textContent=treeCount+"tree in the forest";  
          
            }  
            updateTress();  
        </script>  
          
    </body>  
</html>  