HTML5 SVG矢量图形

SVG是什么?

SVG代表可伸缩的矢量图形
SVG用来定义网络图形
W3C推荐使用SVG

HTML<svg>元素

HTML的<svg>元素(HTML5提出的)是SVG图形的容器.

SVG有几种方法来绘制路径:盒子,圆形,文字和图片.

SVG 圆

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

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 Logo

<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和Canvas之间的区别

SVG是一门语言用来绘制2D图形,用XML代码写.

Canvas绘制2D图像,用脚本(JavaScript)绘制.

SVG是基于XML的,换句话说每个元素在SVG DOM里都可以找到.你可以给任何一个元素添加JavaScript事件.

在SVG里,每个已绘制的形状都被记为一个对象.如果SVG对象的属性改变了,浏览器会自动再次渲染形状.

Canvas是以像素来绘制的.在canvas里,一旦图像被绘制了,浏览器将会忘记.如果图像里的某个对象位置需要改变,整个图像都需要重新绘制,包括整个图像的所有对象.

Canvas和SVG之间的比较

下面的表格显示了一些Canvas和SVG之间的重要差异:

Canvas	SVG
依赖分辨率不支持事件处理弱的文字渲染能力你可以保存结果图片为.png或.jpg 比较适合图像密集的游戏	依赖分辨率支持事件处理最适合应用里的大面积渲染(Google地图) 如果图像很复杂会渲染的很慢(图像的所有对象都是一个DOM对象) 不适合游戏应用

学习更多关于SVG,请阅读我们的SVG教程.

评论区

21技术 www.21xrx.com 备案号：蜀ICP备17043188号-2

其它

提取图片文字免费的JetBrains license services json在线解析 base64加解密文章搜索