问题标签 [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.
ios - SVG sprite 未在 ios iphone ipad 上显示
SVG sprite 未在 ios iphone ipad 上显示。
在 android 和 PC 上,一切正常。但是在 iphone、ipad 上 - 只是一个白屏,如何修复它?
next.js - 如何在 next.js 项目中使用 svg sprites
我想为我的 next.js 应用程序的图标使用 svg sprite。是否有关于最佳实践以及如何实现与服务器端渲染兼容的文章?
我偶然发现了这个包https://github.com/cyrilwanner/next-optimized-images#sprite它是金丝雀项目,但它似乎在新的下一个 10 和它的图像优化之后停止了。
如果有人有任何成功的实现,并且他们愿意分享,我将不胜感激。
此致。
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中精灵的使用
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
.
reactjs - 使用通过 React 组件在 Safari 中获取“加载 URL 数据的不安全尝试:图像/svg+xml ...”
我正在使用 rollup 捆绑一个 react npm 包,该包包含一个图标组件,该组件将名称作为道具并返回一个图标,该名称由反应组件包装。这是组件代码:
文件夹结构如下:
这是我的汇总配置:
这在 Chrome 中运行良好(尽管它确实将所有 svg 内联在href
其中,我认为这是这种方法的目的),但在 Safari 中它会触发以下错误:
问题是,如前所述,这是一个 npm 包,它将图标打包为 js 包的一部分(内联),因此对该组件的服务方式没有太多控制,因为这是由浏览器缓存处理的(也是关键之一使用这种方法的要点)。我对 CORS 非常熟悉,我知道也许避免使用data:image/svg+xml
uri 链接可以解决这个问题,但会增加这个包的构建步骤的复杂性(需要使用 svgr/svgo 构建图标,然后有某种查找表根据名称道具返回正确的图标,即)。
所以,最终我的问题是,使用 react 组件库中的 sprite 方法是否有一种避免此类问题和跨浏览器不一致的万无一失的方法?提前感谢您提供的任何帮助。
css - 有什么方法可以从 CSS 中使用 SVG Sprite?
HTML:
SVG精灵:
有什么方法可以使用 CSS 中的 SVG sprite
像这样