在 SVG 中存储多个元素并将它们用作 CSS 背景？答案

【问题标题】：Store multiple elements in SVG & use them as CSS backgrounds?在 SVG 中存储多个元素并将它们用作 CSS 背景？
【发布时间】：2011-08-07 02:42:08
【问题描述】：

我想知道是否可以在一个 SVG 文件中创建多个“画笔”并在我的 CSS 中使用它们。

现在我有一个 SVG 文件，它在“defs”中存储了一个渐变和一个绘制它的矩形。然后我在我的 CSS 中使用这个 SVG 文件作为背景图像。它运作良好，但我宁愿没有一百万个单独的 SVG 文件。我想在单个 SVG 文件中组合“画笔”之类的东西，例如 CSS sprites 或 XAML。

有没有办法做到这一点？如果是这样，为 CSS 背景图像指定要使用 svg 文件中的哪个 SVG 元素的语法是什么？

感谢您的帮助。

【问题讨论】：

我尝试过为每个 svg 元素指定一个 id，然后像 /img/image.svg#id 一样引用它，但我没有成功。
没错。我也一直在尝试类似的事情，但也没有运气。似乎是一件很实际的事情，但我担心浏览器可能无法通过 CSS 访问 SVG 中的单个资源。如果是这样，这是一个相当大的监督 IMO。
为什么不能在 SVG 中并排绘制渐变，然后为背景选择正确的部分？

标签： css svg

【解决方案1】：

理论上是的，这应该是可能的。但它尚未在 w3c 规范中完全定义，现阶段的实现确实有所不同。

请注意，svg 本身允许special fragment syntax，因此理论上您应该能够链接到同一 svg 文件的不同视图。这可以用来做 CSS/SVG 精灵。

直接链接到嵌套 svg 片段（或 svg 内的任何其他元素）的 id 需要进一步指定。

假设与 CSS 背景属性中的片段链接有效，那么如果您使用 XHTML（将生成的文件作为 application/xhtml+xml 提供），则可能只在主文档中包含内联的 svg 资源，从而无需对于许多单独的文件。如果您希望将 svg 分开进行编辑，这可以作为发布前的构建步骤来完成。另一种可能是使用data uris。

【讨论】：

问题是虽然片段确实在 SVG 文件中工作，但似乎没有办法从 CSS 背景属性中引用它们。 Duopixel 的语法看起来应该是正确的，但看起来浏览器根本不支持它。
我所描述的并非在所有浏览器中都实现，但它应该是这样工作的。它已经在某些浏览器中运行，例如 firefox，您可以在此处阅读有关“SVG Stacks”的更多信息：simurai.com/post/20251013889/svg-stacks

【解决方案2】：

我也在寻找相同的，这里是我能找到的指针：

17.3 Linking into SVG content: IRI fragments and SVG views (w3.org)
SVG Stacks (simurai.com)
Can I use SVG fragment identifiers? (caniuse.com)
Better SVG Sprites With Fragment Identifiers (broken-links.com)

根据 caniuse.com 的说法，浏览器支持存在问题，但这并不妨碍您尝试观察未来浏览器的演变（希望将来他们都支持这一明显的功能）。

【讨论】：