如何使用SVG defs.svg中的符号作为CSS中的背景图像？

Question

我正在尝试使用我的defs.svg中的符号作为CSS中的背景图像，而不是指向单个SVG文件的直接路径。

所以而不是：

background: url(spoon.svg);

我想做这样的事情：

background: url(defs.svg#spoon);

#spoon是defs.svg中的符号，id =“spoon”。不幸的是，这对我不起作用。有没有人遇到过不涉及自定义JS /等的解决方案？

Answer 1

您需要在defs.svg中定义view和use标记，以便CSS知道要查看的位置和要显示的内容。

因此，例如，假设您在SVG内部有一个符号定义为：

<symbol id="poop" viewBox="0 0 100 100">
    <!-- Your shapes here -->
</symbol>

在关闭svg代码之前，您必须添加view和use定义代码：

<view id="poop-view" viewBox="0 0 100 100" /><!-- This ID used here is what you'll use in your CSS! -->
<use xlink:href="poop" width="100" height="100" x="0" y="0"></use>

请注意，此时，您可以在浏览器中打开原始SVG文件，它会在显示空白之前显示您的绘图！

现在您可以在CSS中设置SVG符号：

div{background-image:url("defs.svg#poop-view")} /* Remember, it's the ID used on your <view> def! */

另外，请确保您的SVG在开始标记上包含xmlns:xlink命名空间，否则它不会起作用。

免责声明：我尝试在我所在大学的服务器上托管SVG文件时使用此设置，但出于某种原因，这不起作用（即使SVG文件不能显示，如果SVG上缺少<?xml>和<!DOCTYPE>标记，因此请务必检查SVG文件的完整性。

在Jennifer Hiller's codepen blog上了解详情。