问题标签 [inline-svg]

我打算使用内联 svg 概念为项目创建 svg spritesheet。

实际上有很多方法可以创建 svg spritesheet。我更喜欢两种方法（因为性能）来创建 spritesheet。它们如下：

• 通过使用具有唯一 ID 的标签包装每个 svg 的内容，将所有 svg 分组为单个 svg symbol，以便稍后我们可以use在 HTML 中使用标签来引用它。
• 生成一个 css 文件，其中包含通过 cssbackground-image属性引用的所有 svg。每个 svg 都有一个唯一的类名。

现在，我在确切使用哪种方法方面处于两难境地。仅供参考，这不是基于意见的问题，因为我不是在寻找意见，而是在考虑性能和最佳解决方案。

PS：我可以使用 gulp 任务运行器生成 svg 精灵表。

我正在尝试通过 CSS 中的自动生成元素重用内联 SVG，但它没有按预期工作。

这是 SVG：

在 base64 编码成这个 CSS 之后：

它无法显示 SVG

这是一个更完整的 codepen。

我正在尝试将use元素内的svg元素对齐到最左端。我试过了text-align: left，text-anchor: start但 use 元素仍然在 svg 元素的中间。

这是小提琴

当使用 gem 的页面上有 svg 时，我的 Rails 应用程序中的某些页面似乎使 Safari 完全崩溃inline_svg。

导航到该页面会导致错误消息“Safari Web 内容意外退出”。

这是堆栈跟踪的一部分，它使我相信这是 SVG 渲染的问题：

这是 svg 本身的样子：

我正在使用 SVG 构建图标解决方案，其中部分图标需要可重用。<svg />在我的 HTML 文档中有几个不同的内联元素，这些<use />元素非常适合重用形状——矩形、路径等，甚至在 svg 元素之间也是如此。

但是，重用其他定义，比如<radialGradient />对我不起作用。当渐变<defs />在同一个元素中的一个元素中定义<svg />时，它会按预期工作，但当渐变在另一个<svg />元素中定义时则不会。

伪代码

为什么可以use从其他svg元素形成形状，但不能像这样的属性值？当我将shadow渐变移动到defs可见 svg 元素内的元素中时，参考效果很好。

这是一个说明工作和非工作的 JSFiddle：https ://jsfiddle.net/7tfna0L8/2/

解决方案

Robert Longson指出我的可重用 svg 的“存储库”有一个style. display:none对我来说，这感觉是正确的方法。毕竟，这个存储库不应该以任何方式显示。问题是浏览器优化了这一点，甚至可能根本不解析任何样式，这使得可以引用元素，但不能引用样式 （比如我的渐变）

工作 jsFiddle：https ://jsfiddle.net/atornblad/7tfna0L8/3/

我在我的 css 中将以下内联 SVG 定义为背景图像。

它在 Chrome、Firefox 和 Edge 中运行良好，但在 Internet Explorer 11 中失败。为什么？

JSfiddle 在这里。

是否可以像 HTML 中的 glyphicon 一样使用 svg？

我的意思是使内联 svg 缩放到当前字体大小，并且可以使用当前颜色/背景颜色？

后记：可以用“1em”操作“svg-glyph”的大小，但要准备好 1 em 的值有点不足：它比大写字母大，比行高小。

不知何故应该可以从 html 继承填充和视口，但我找不到如何。

PS 应该可以使用 javascript，但不要使用 javascript 解决方案。

是否可以将内联 svg 中的 id 限制为仅 svg？

例如

在这里，这在页面上创建了一个全局 ID“线性”。

我怎样才能防止这种情况？

即我想document.getElementById("linear")返回undefined。

或者是否有另一种机制来引用 svg 中的项目，以便我可以应用渐变而不必使用 ID？

相关：内联 SVG 的重复（过滤器）ID

我正在使用电子商务平台，无法安装 d3 或其他 svg 库。出于安全原因，该站点不允许我操作具有“外部来源”的 iframe——显然，所有 iframe 都是外部的，但无论如何。

所以我采取的是尝试将 svg 注入 div 标签。不知道为什么我的代码不起作用。我需要附加一个 svg 或一些花哨的东西吗？它应该在按下时将圆圈变为红色。

当您需要使一个 div 尽可能小而对其子级足够大时，您可以将其设置为display: inline-blockor position: absolute。

这不适用于<svg>. 在这个例子中：

如果path仅占用 20x20，则svg元素仍将占用 300x150（或浏览器默认值）。

你怎么能达到同样的结果？