判断一个元素是否是 SVG 元素

我们经常通过事件代理会取到一些元素,大概我们第一个想到的 tagName 来判断,但是这样的确需要写过 map 来判断。我们可以有个快捷的方法: const el = document.querySelector('.svg-inner'); el.ownerSVGElement // true 则表示式 svg 元素 如果 false 则不是 参考: https://stackoverflow. 详情 »

SVG 中 viewport 与 viewbox 的区别

之前做 weex-svg 的时候,开发者第一次接触 SVG (手写那种,虽然很多情况都有设计师使用 AI 来完成这项工作,但还是不排除需要利用到 svg 的每个 元素)。 才开始,大家都会困惑于 viewBox 和 viewport这两个属性,大家可能也会看到 svg 代码中的千奇百怪。是的,自己也曾为此困惑,宝宝当时内心: 之前自己在做 SVG 详情 »

GraphicsJS 入门,一个轻量级的前端图形库

为什么选择GraphicsJS 前端可以选择的svg库,有很多,比如snap.svg或者BonsaiJS当然这些库也是各有优势。而这篇文章主要就是说GraphicsJS,让大家知道他的优势和特点。 轻量级,具备灵活的 Javascript API 来自AnyChart团队,全球非常出名的可视化团队。 GraphicsJS 是一个开源项目,无需商业授权 对于低版本的浏览器的支持,支持IE6 对于图像和动画支持比较好,帮助开发者创建复杂的交互效果 GraphicsJS 基本使用 <style> .stage{ 详情 »

SVG Sprite 入门(SVG图标解决方案)

关于浏览器图标解决方案,一直就有很多 CSS Sprite,Icon Font,CSS Icon以及SVG.相对而言svg矢量图标以及支持浏览器自身解析的优点,很多团队都已经在使用了。这篇文章主要说明svg图标的使用和制作。 演示地址 代码 SVG Sprite 传统的做法 使用AI或者合并SVG图像,然后用background-postion; 打开AI,新建一个30 * 60(px)的画布,设置好网格和参考线. 用AI打开svg文件,然后复制路径到画布上调整大小 详情 »