聊聊svg
2024-08-25 00:14:42
来源：SVG的用法
补充
CANVAS产生的dom数量比SVG要少
SVG可以使用css设置动画样式 对于动画性能来说，不能说svg或canvas谁更优，而是要看情况： SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 通过 JavaScript 来绘制 2D 图形。 Canvas 是逐像素进行渲染的。 在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
canvas是个像素库 绘制完了基本不记录过程 更快 svg建立了一大堆可交互对象 本性长于交互 但性能会弱些
最新文章
- vue.js 开发生态总结
- Android drawableleft drawableTop 设置图片的大小
- Python在Windows下安装第三方库浅谈
- React 点击按钮显示div与隐藏div，并给div传children
- 【ZJOI2004】嗅探器
- NK3C 业务权限控制
- 利用php给图片添加文字水印--面向对象与面向过程俩种方法的实现
- iOS: 学习笔记, Swift与C指针交互(译)
- 沼跃鱼早已看穿了一切 C/C++
- Linux(centos5.0+)unison+inotify-tools触发式双向自动同步
- session写入memcache
- 什么是CSS
- C#技巧记录——持续更新
- 安装pitchpork 及 pacbioscience 的问题及解决
- What-does-git-remote-and-origin-mean
- Hive常用语句
- Ajax同步
- 2018.12.30 bzoj3027: [Ceoi2004]Sweet（生成函数+搜索）
- MES制造执行系统
- js 四种调用模式和this的关系总结