问题标签 [svg-sprite]

SVG sprite 未在 ios iphone ipad 上显示。

在 android 和 PC 上，一切正常。但是在 iphone、ipad 上 - 只是一个白屏，如何修复它？

我想为我的 next.js 应用程序的图标使用 svg sprite。是否有关于最佳实践以及如何实现与服务器端渲染兼容的文章？

我偶然发现了这个包https://github.com/cyrilwanner/next-optimized-images#sprite它是金丝雀项目，但它似乎在新的下一个 10 和它的图像优化之后停止了。

如果有人有任何成功的实现，并且他们愿意分享，我将不胜感激。

此致。

我有大约 30 个彩色 .SVG 图标，为了简单起见并减少发送到服务器的请求数量，我创建了一个集成的 .SVG，如下所示：

我在我的 html 页面中调用我的图标，如下所示：

并且在某些页面中超过 20 个图标。

问题：在加载页面期间，发送到服务器的请求太多，所以我认为我的精灵不工作。我不知道怎么了？

仅当我将 svg sprite 作为代码包含在同一文件中时，渐变才能正常工作，这首先破坏了拥有 svg sprite 的目的。我从 3 年前的另一篇文章中读到，有人说它被窃听了，但肯定必须对此进行修复吗？

精灵是如何形成的：<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none"> <symbol id="backpack" viewBox="0 0 177.4 181.2"> <defs>(some code)</defs> (some paths) </symbol></svg>

index.html中精灵的使用

它如何从外部文件呈现

如果我将 svg sprite 保存在同一个文档中，它会如何呈现

从extract-text-webpack-plugin到之后，mini-css-extract-plugin我在 SCSS / CSS 文件中遇到了一些问题，这些问题不再解决。这些 URL 是svg-sprites使用svg-sprite-loader. 在一切正常之前。

Webpack 只是添加了原始 svg 文件所在的完整路径（“/User/...”）。我希望我从 sprite 中获取 URL，并在末尾带有正确的哈希值，例如my-svg-sprite.svg#someid.

我正在使用 rollup 捆绑一个 react npm 包，该包包含一个图标组件，该组件将名称作为道具并返回一个图标，该名称由反应组件包装。这是组件代码：

文件夹结构如下：

这是我的汇总配置：

这在 Chrome 中运行良好（尽管它确实将所有 svg 内联在href其中，我认为这是这种方法的目的），但在 Safari 中它会触发以下错误：

问题是，如前所述，这是一个 npm 包，它将图标打包为 js 包的一部分（内联），因此对该组件的服务方式没有太多控制，因为这是由浏览器缓存处理的（也是关键之一使用这种方法的要点）。我对 CORS 非常熟悉，我知道也许避免使用data:image/svg+xmluri 链接可以解决这个问题，但会增加这个包的构建步骤的复杂性（需要使用 svgr/svgo 构建图标，然后有某种查找表根据名称道具返回正确的图标，即）。

所以，最终我的问题是，使用 react 组件库中的 sprite 方法是否有一种避免此类问题和跨浏览器不一致的万无一失的方法？提前感谢您提供的任何帮助。

HTML：

SVG精灵：

有什么方法可以使用 CSS 中的 SVG sprite

像这样