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

Question

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

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

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

感谢您的帮助。

Answer 1

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

请注意 svg 本身允许 special fragment syntax , 所以理论上你应该能够链接到同一个 svg 文件的不同 View 。这可用于制作 CSS/SVG Sprite 。

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

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