HTML <svg> 标签

• 

  <svg>标签定义和用法

  <svg>标签定义了SVG图形的容器。
  SVG有几种绘制路径，框，圆，文本和图形图像的方法。
  要了解有关SVG的更多信息，请阅读我们的SVG教程。

• 

  <svg>标签浏览器支持

  IE/Edge	Chrome	FireFox	Safari	Opera
  9.0（含）以上	4.0（含）以上	3.0（含）以上	3.2（含）以上	10.1（含）以上

• 

  HTML4.01和HTML5之间的差异

  <svg>是HTML5的新标签。

• 

  <svg>标签实例

  <!-- 画矩形 -->
  <svg width="400" height="100">
    <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
    抱歉，您的浏览器不支持内联SVG。
  </svg>
  
  <!-- 画正方形 -->
  <svg width="400" height="180">
    <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
    抱歉，您的浏览器不支持内联SVG。
  </svg>
  
  <!-- 画星  -->
  <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>
  
  <!-- 画徽标  -->
  <svg height="130" width="500">
  <defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:rgb(255,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="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
   抱歉，您的浏览器不支持内联SVG。
  </svg>

  复制

  尝试一下
• 

  <svg>标签相关页面

  HTML教程：HTML SVG

  SVG教程：SVG教程