SVG Sprite 技术实践

SVG Sprite(这里特指基于svg symbol)作为传统css sprite和icon font的替代方案,在现代浏览器(ie9+)上能够正常运行,关于它的技术背景、特点和降级方案等不再赘述,可以参考以下几篇文章,写的都非常不错:

  1. 未来必热:SVG Sprite技术介绍

  2. Web 设计新趋势: 使用 SVG 代替 Web Icon Font

  3. 使用SVG中的Symbol元素制作Icon

  4. 面向未来的图标图片精灵

在具体实践过程中,遇到以下两个问题:

  1. IE浏览器不支持外链svg sprite文件,也就是说svg sprite必须嵌入到页面里面(最前面)

  2. IE浏览器下,拥有use标签到svg元素上到点击事件无法冒泡,现象是在使用代理的方式绑定事件时(绑定到svg元素的父元素上,绑定到svg元素本身就更没办法了),点击svg元素本身无法触发点击事件。

下面就这两个问题逐个看看解决方案。

问题1

我们一是要保证ie下svg sprite图标能正常显示,所以必须采用嵌入到页面的方案,同时还要解决缓存的问题,如果直接放在模版文件里,那每次都需要重新下载,就失去了原来css spirte和icon font可以缓存的特点。

这里我采用的方案是本地利用构建工具(我用的是基于grunt的grunt-svg-sprite,gulp也有对应的插件)生成svg sprite文件,然后单独在页面最前面放一个js文件,js文件包含svg sprite的内容,并在自身加载完成后把svg sprite插入到页面最前面。

tpl:

...

svgsprite.js:

// 构建工具生成的svg sprite文件var svgsprite = require('./svg/symbol/svg/sprite.symbol.svg');document.body.insertAdjacentHTML(    'afterBegin', // 插入body第一个子节点前面    '' + svgsprite + '');

browserify配置:

// 是svg文件可以作为string类型被requirebrs.transform(stringify(['.svg']));

因为js文件是可以缓存的,所以相当于变相把svg sprite缓存起来了。

问题2

第二个问题比较棘手一点,关于这个问题,jquery开发人员也做了解答:

Delegated event not firing for click within SVG use element

前面说了是由于包含use标签的svg元素无法冒泡,那么直接在svg元素或者svg父元素上绑定事件就可以了,但是在涉及新增、删除等操作时,可操作的按钮都是动态添加的,如果每次添加元素都要重新绑定事件,是非常麻烦的。

幸好有pointer-events这个神器,这是css3的新属性,虽然对于普通html元素的支持性不是太好,但对于支持svg的浏览器,基本都支持这个属性。

http://caniuse.com/

Already part of the SVG specification, and all SVG-supporting browsers appear to support the property on SVG elements.

通过对svg元素应用pointer-events:none,可以让svg相对点击事件“透明”,只要事件绑定到svg的父元素上,且父元素具备宽高(需要设置为inline-block,或者应用float、position:absolute等,否则ie下点不中)。

针对以上需求,我写了个简单的sass mixin:

@mixin svg-sprite(
$width,
$heigth,
$fill: default,
$hover-fill: default
) {
display: inline-block;
width: $width;
height: $heigth;
svg.g-ico {
width: $width;
height: $heigth;
pointer-events:none;
}
@if $fill != default {
svg {
fill: $fill;
}
}
@if $hover-fill != default {
&:hover { // tips: hover是在父元素上
svg {
fill: $hover-fill;
}
}
}
}
给svg元素的父元素应用这个mixin,这样就算是圆满解决了这个问题。

Tips: 因为我们的网站兼容ie9+,所以ie9以下的没有做降级处理,如果需要,可以参考前面列出的几篇文章。

关键字:svg, sprite, 元素, fill


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部