HTML5的内联SVG

最新推荐文章于 2025-05-20 11:21:07 发布

JG_zsj

最新推荐文章于 2025-05-20 11:21:07 发布

阅读量500

点赞数

文章标签：转载自

什么是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>  