主页 / 问题 / 620522
Accepted
Alex
Asked:2020-01-28 19:40:51 +0000 UTC2020-01-28 19:40:51 +0000 UTC

连接 SVG 精灵

  • 772

你好。我想在网站上使用 svg 图片而不是 png，很可能是他们的 sprite。对缩放图片（针对不同设备）和更改颜色（例如，悬停）的能力感兴趣。跨浏览器兼容性。对“旧”浏览器的支持不是必需的（它会支持 - 好吧，如果不支持 - 这并不可怕），也不需要动画......需要强制支持 IPAD，MAC OS，iPhone ...

How to connect svg sprites 已经写了很多，有争议，大多是几年前写的文章......告诉我如何根据当前现实中的最佳实践来做到这一点？（也许是个人经验）我使用 SASS，也许有针对它的“锐化”解决方案。

веб-программирование

2 个回答

  1. Best Answer

    由于 Gulp 已经是前端构建的事实标准，我认为建议您使用gulp-svg-sprites插件创建 SVG 精灵开始是个好主意。现在回答你的问题：

    • 缩放能力——因为这是 SVG，即使基于缩写也不会有缩放问题。
    • 可以通过 CSS（在 mode 中）更改颜色symbols。
    • 跨浏览器兼容性- IE9 及更高版本

    无需进一步调整，gulp-svg-sprites 插件的输出将是一个 SVG 文件，其中包含所有图标作为常规精灵（如 PNG 精灵）和一个带有视图样式的 CSS 文件.%icon_name% {}。如果您需要获得不同的输出结果，则必须配置插件。使用这种 sprite 的好处是可以在伪元素中使用图标。缺点是您无法通过简单的方式为精灵元素重新着色（您可以通过 CSS 过滤器对其重新着色，或者预先生成您需要的所有颜色的元素）。

    也可以将 sprite 制作为一组元素symbol，作为一个组，可以选择生成 png 回退。如果你在 SCSS 语法中使用 SASS，你还可以得到生成的带有样式的 SCSS 文件。

    • 6

  2. 在我看来，使用符号创建精灵更容易，在其中填充='继承'，然后操纵 svg 的颜色。

    <svg class="svg" style="fill:red">
    <use xlink:href="unit/img/sprite.svg#1"></use>
</svg>

    分别悬停等 在 class="svg" 中描述。

    • 0

相关问题