SVG Sprite 技术实践

2019年9月14日 75次阅读 来源: animabear

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

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

  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:

<body>
<script type="text/javascript" src="/static/js/svgsprite.js" async></script>
...
</body>

svgsprite.js:

// 构建工具生成的svg sprite文件
var svgsprite = require('./svg/symbol/svg/sprite.symbol.svg');

document.body.insertAdjacentHTML(
    'afterBegin', // 插入body第一个子节点前面
    '<div class="hide">' + svgsprite + '</div>'
);

browserify配置:

// 是svg文件可以作为string类型被require
brs.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/#search=pointer-events

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以下的没有做降级处理，如果需要，可以参考前面列出的几篇文章。

    原文作者：animabear
    原文地址: https://segmentfault.com/a/1190000006202310
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞