在 SVG 和 SVG 中存储多个元素使用它们作为 CSS 背景？
我想知道是否可以在单个 SVG 文件中创建多个“画笔”并在我的 CSS 中使用它们。
现在我有一个 SVG 文件，它有一个存储在“defs”中的渐变和一个绘制它的矩形。然后我使用这个 SVG 文件作为 CSS 中的背景图像。它运行良好，但我不想拥有一百万个单独的 SVG 文件。我想将像“画笔”这样的东西组合到一个 SVG 文件中，就像 CSS 精灵或 XAML 能够做到的那样。
有办法做到这一点吗？如果是这样，为 CSS 背景图像指定使用 svg 文件中的哪个 SVG 元素的语法是什么？
感谢您的任何帮助。
I'm wondering if I can create multiple "brushes" in a single SVG file and use them thoughout my CSS.
Right now I have a single SVG file that has a gradient stored in the "defs" and a single rectangle that draws it. Then I use this SVG file as a background image in my CSS. It works well but I'd rather not have a million separate SVG files. I'd like to combine like "brushes" together in a single SVG file something like CSS sprites or XAML is capable of.
Is there a way to do this? If so what's the syntax to specify for the CSS background image which SVG element from the svg file to use?
Thanks for any help.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
理论上是的，这应该是可能的。不过，它尚未在 w3c 规范中完全定义，并且现阶段的实现确实有所不同。
请注意，svg 本身允许 特殊片段语法，因此理论上您应该能够链接到同一 svg 文件的不同视图。这可以用来制作 CSS/SVG 精灵。
直接链接到嵌套 svg 片段的 id（或 svg 内的任何其他元素）需要进一步指定。
假设与 CSS 背景属性中的片段链接有效，那么如果您使用 XHTML（将生成的文件作为 application/xhtml+xml 提供服务），则可能将 svg 资源内联包含在主文档中，从而消除了许多单独的文件。如果您希望将 svgs 分开进行编辑，则可以将其作为预发布构建步骤来完成。另一种可能性是使用数据uri。
In theory yes, that should be possible. It's not yet fully defined in a w3c spec though and the implementations do differ at this stage.
Note that svg itself allows a special fragment syntax, so in theory you should be able to link to different views of the same svg file. That could be used to do CSS/SVG sprites.
Linking directly to the id of a nested svg fragment (or to any other element inside the svg) is something that would need to be further specified.
Assuming that linking with fragments from a CSS background property works, then a possibility if you use XHTML (serving the resulting file as application/xhtml+xml) is to just include the svg resources inline in the main document, eliminating the need for many separate files. This can be done as a pre-publishing buildstep if you wish to keep the svgs separate for editing. Another possibility is to use data uris.
我也在寻找相同的东西，这里是我可以找到的指针：
根据 caniuse.com，浏览器支持存在问题，但这并不妨碍您尝试观察未来的浏览器演变（希望未来有一天他们都会支持这个明显的功能）。
I'm also seeking for the same, and here are the pointers I could find:
According to caniuse.com, there is an issue with browser support, but that does not prevent you to try and observe future browser evolution (in the hope a future day they will all support this obvious feature).