SVG 是什么?

  • Scalable Vector Grphics, 可缩放矢量图形
  • XML语言描述的, 大小写敏感的
  • 支持文档对象模型DOM
  • 协议
  • 图片格式

SVG VS Html5 Canvas

SVG 渲染速度慢于canvas
SVG DOM操作灵活

SVG 示例

  1. <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  2. width="200px" height="200px">
  3. <rect x="0" y="0" width="100%" height="100%"
  4. fill="none" stroke="black"/>
  5. <circle cx="100" cy="100" r="50"
  6. style="stroke: black; fill: red;"/>
  7. </svg>

渲染方式

  • SVG是严格按照定义元素的顺序来渲染的,写在前面的元素先被渲染,写在后面的元素后被渲染。
  • 后渲染的元素会覆盖前面的元素,虽然有时候受透明度影响,看起来不是被覆盖的。
文档更新时间: 2019-09-03 06:33