SVG Sprite 用好<symbol><use>标签
发布网友
发布时间：2024-10-03 15:19
共1个回答
热心网友
时间：2024-10-06 12:33
SVG Sprite 作为现代浏览器（ie9+）的理想选择，替代了传统CSS sprite和icon font，但需关注其在IE兼容性和缓存问题上的处理。以下是实践中的关键点和解决方案。
问题1：IE兼容与缓存
为确保在IE下SVG Sprite图标正常显示，需将其嵌入页面并解决缓存问题。避免直接在模板中，以防止每次刷新都需要重新下载。通过grunt-svg-sprite等构建工具，本地生成SVG sprite文件，然后将SVG内容封装到单独的js文件svgsprite.js中，利用浏览器的缓存特性。
示例代码：
模板文件（tpl）
js文件（svgsprite.js）
使用browserify进行配置
问题2：事件处理的复杂性
处理包含标签的SVG元素事件触发问题时，需注意事件冒泡限制。对于动态添加的按钮，频繁重新绑定事件会很繁琐。这时，CSS3的pointer-events属性成为救星，它在SVG支持的浏览器中被广泛支持。
利用pointer-events:none使SVG对点击事件透明，只需将事件绑定在SVG父元素上，确保父元素有宽高，可以使用Sass mixin简化处理。
总结
SVG（可缩放矢量图形）是一种强大的矢量图格式，Adobe Illustrator常用于制作。在高清屏幕时代，SVG Sprite利用标签提供跨分辨率的图标。通过合理运用本地生成的SVG sprite、事件处理技巧以及CSS属性，可以确保SVG Sprite在各种浏览器中的顺畅表现。
