HTML SVG

  • 什么是SVG

    • <svg>是HTML5添加的新元素
    • SVG代表可缩放矢量图形
    • SVG用于定义Web的图形
    • SVG是W3C的推荐
    HTML <svg>元素是SVG图形的容器。SVG有几种绘制路径,框,圆,文本和图形图像的方法。 <svg>浏览器支持:
    Internet Explorer Chrome FireFox Safari Opera
    9.0(包含)以上支持 4.0(包含)以上支持 3.0(包含)以上支持 3.2(包含)以上支持 10.1(包含)以上支持
  • SVG示例

    SVG圆:
    <!DOCTYPE html>
           <html>
           <body>
           <!-- cx  cy  是圆心的平面坐标,r是半径,stroke是边框色,stroke-width是边框宽,fill是填充色 -->
           <svg width="100" height="100">
             <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="#1E9FFF" />
           对不起你的浏览器不支持内联SVG。浏览器不支持将显示这里。
           </svg>
            
           </body>
           </html>
    
    尝试一下
    SVG矩形:
    <!DOCTYPE html>
             <html>
             <body>
    
             <svg width="400" height="100">
               <rect width="400" height="100"  style="fill:rgb(0,255,0);stroke-width:10;stroke:rgb(255,0,0)" />
             对不起你的浏览器不支持内联SVG。浏览器不支持将显示这里。
             </svg>
              
             </body>
             </html>
    
    尝试一下
    SVG圆角矩形:
    <!DOCTYPE html>
           <html>
           <body>
    
           <svg width="400" height="180">
             <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:#009688;stroke:#FFB800;stroke-width:5;opacity:0.5" />
           对不起你的浏览器不支持内联SVG。浏览器不支持将显示这里。
           </svg>
    
           </body>
           </html>
    
    
    尝试一下
    SVG星形:
    <!DOCTYPE html>
           <html>
           <body>
    
           <svg width="300" height="200">
             <polygon points="100,10 40,198 190,78 10,78 160,198"
             style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
           对不起你的浏览器不支持内联SVG。浏览器不支持将显示这里。
           </svg>
            
           </body>
           </html>
    
    
    尝试一下
    SVG标志:
    <!DOCTYPE html>
           <html>
           <body>
    
           <svg height="130" width="500">
             <defs>
               <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                 <stop offset="0%"
                 style="stop-color:rgb(0,255,0);stop-opacity:1" />
                 <stop offset="100%"
                 style="stop-color:rgb(255,0,0);stop-opacity:1" />
               </linearGradient>
             </defs>
             <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
             <text fill="#2F4056" font-size="45" font-family="Verdana"
             x="50" y="86">SVG</text>
           对不起你的浏览器不支持内联SVG。浏览器不支持将显示这里。
           </svg>
    
           </body>
           </html>
    
    尝试一下
  • SVG和Canvas之间的差异

    SVG是一种用于描述XML中的2D图形的语言。 Canvas即时绘制2D图形(使用JavaScript)。 SVG是基于XML的,这意味着SVG DOM中的每个元素都可用。您可以为元素附加JavaScript事件处理程序。 在SVG中,每个绘制的形状都被记住为对象。如果更改了SVG对象的属性,则浏览器可以自动重新渲染形状。 Canvas逐像素渲染。在Canvas中,一旦绘制了图形,浏览器就会忘记它。如果想更改其位置,则需要重绘整个场景,包括可能已被图形覆盖的任何对象。 下表显示了Canvas和SVG之间的一些重要差异:
    Canvas SVG
    分辨率相关 分辨率独立
    不支持事件处理程序 支持事件处理程序
    文本渲染能力差 最适合大型渲染区域的应用程序(例如谷歌地图)
    可以将生成的图像保存为.png或.jpg。 如果渲染复杂(任何使用DOM的东西都会很慢)
    非常适合图形密集型游戏 不适合游戏应用
    要了解有关SVG的更多信息,请阅读我们的SVG教程