我正在尝试使用我的defs.svg中的符号作为CSS中的背景图像，而不是指向单个SVG文件的直接路径。
所以而不是：
background: url(spoon.svg);
我想做这样的事情：
background: url(defs.svg#spoon);
#spoon是defs.svg中的符号，id =“spoon”。不幸的是，这对我不起作用。有没有人遇到过不涉及自定义JS /等的解决方案？
答案 0 :(得分：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文件的完整性。