问题标签 [svg-sprite]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
167 浏览

ios - SVG sprite 未在 ios iphone ipad 上显示

SVG sprite 未在 ios iphone ipad 上显示。

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

0 投票
0 回答
696 浏览

next.js - 如何在 next.js 项目中使用 svg sprites

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

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

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

此致。

0 投票
1 回答
191 浏览

svg-sprite - SVG堆栈精灵没有减少发送请求的数量

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

我在我的 html 页面中调用我的图标,如下所示:

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

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

在此处输入图像描述

0 投票
1 回答
41 浏览

html - 从外部 SVG 精灵文件中使用 SVG 渐变时未渲染

仅当我将 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 保存在同一个文档中,它会如何呈现

0 投票
0 回答
215 浏览

webpack - 从未正确解析的 SCSS 文件中从 extract-text-webpack-plugin 切换到 mini-css-extract-plugin URL 后

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.

0 投票
1 回答
209 浏览

reactjs - 使用通过 React 组件在 Safari 中获取“加载 URL 数据的不安全尝试:图像/svg+xml ...”

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

文件夹结构如下:

这是我的汇总配置:

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

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

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

0 投票
1 回答
148 浏览

css - 有什么方法可以从 CSS 中使用 SVG Sprite?

HTML:

SVG精灵:

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

像这样