随笔分类 -  svg

【批注】技术选型 -- 绘图 DrawGraphics
摘要：原文转自：技术选型 -- 绘图 DrawGraphics 作者：雷文宇 Web实现图形方式有3种：纯DOM节点、SVG矢量图和Canvas方式。纯DOM节点这种方式是一个基于旧版本浏览器，非主流Web绘图方式，并且性能不高的。当现主流的实现方式有两种：SVG和Canvas，SVG矢量DOM节点绘制技 阅读全文
posted @ 2019-08-12 21:40 执白 阅读(382) 评论(0) 推荐(0)
svg分图层显示图像
摘要：一、问题 给定的数组里包含位置相同但图层（layer，相当于z-index）不同的元素，但是本该位于下层的元素遮住了上层的元素，导致部分元素无法正常显示。 二、原因 svg规定：先添加至节点树的元素位于z-index底层，后添加的元素位于上层。然而给定的数组里图层元素排列混乱。 三、解决 将数组按图 阅读全文
posted @ 2019-07-30 18:56 执白 阅读(1761) 评论(0) 推荐(0)
svg与canvas的语法形式区别
摘要：因为网上关于svg和canvas的区别大多是性能上的，关于语法形式的区别资料很少，还有很多错误...导致转换时查资料花了不少时间，因此整理一下，方便对比学习，少走弯路。 一、创建概念 canvas是创建出一个画布（ctx），然后一直往画布里添加元素，所以只需要往节点树里添加一次即可； svg是每创建 阅读全文
posted @ 2019-07-09 23:05 执白 阅读(383) 评论(0) 推荐(0)
svg的transform-matrix详解
摘要：写在最先：如果你发现百度几个小时都还没能解决问题的话，为什么不FQ上个google呢？ 以及，下图这种不负责任的错误答案居然还有那么多人转。。。 一、svg transform的种类 translate（平移） skew（倾斜） rotate（旋转） scale（缩放） matrix（矩阵操作，可涵 阅读全文
posted @ 2019-07-09 10:33 执白 阅读(10425) 评论(8) 推荐(0)
svg-path详解
摘要：一、svg的 <path>命令 M = moveto // m 50 20 =》 以（50,20）位置为起始点 L = lineto // m 50 20 l 20 50 =》从（50,20）到（20,50）作直线 H = horizontal lineto // m 50 20 h 50 =》 从 阅读全文
posted @ 2018-12-03 22:00 执白 阅读(5545) 评论(0) 推荐(1)
svg基础知识体系建立
摘要：一、简介：SVG 是使用 XML 来描述二维图形和绘图程序的语言。 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维 阅读全文
posted @ 2018-11-29 22:35 执白 阅读(230) 评论(0) 推荐(0)