我可以在 css url 调用中传递元素 id 吗？答案

【问题标题】：Can I pass an element id in a css url call?我可以在 css url 调用中传递元素 id 吗？
【发布时间】：2022-01-08 09:39:09
【问题描述】：

我有一个包含一系列 <symbol> 的 svg 文件，它们都有唯一的 ID。我想要做的是将html文件中元素的背景图像属性设置为我选择的任何id

background-image: url(“sprite.svg#symbol_1”);

该路径语法在 <img> 中用作“src”或在 <use> 中用作“href”，但我似乎无法在 css 中得到它。如果我将符号放在 <defs> 容器中，然后在 svg 文件中设置 <use>，那么我将 <use> 设置为的符号将在我删除“#symbol_1”时显示，但我不能改变它。

【问题讨论】：

Javascript 使用数据属性？
我了解到您正在尝试使用 svg 作为背景图片。它行不通。符号不可见。用嵌套的 svg 元素或组替换符号。请阅读更多关于How SVG Fragment Identifiers Work
@dalelandry 是的，到目前为止，我一直在使用脚本来处理它，但我正在尝试简化它，让这个过程比 javascript 更清晰、更快捷。
@enxaneta 谢谢！这实际上非常有帮助。我现在深入研究 mdn 和 csswg 文档，甚至没有考虑研究以及它们的工作原理，我觉得有点愚蠢。

标签： html css svg

【解决方案1】：

所以我不久前就开始工作了。部分感谢@enxaneta 评论的链接。该链接基本上解释了如何做到这一点，但我会给出快速版本。在 svg 文件中，如果添加这样的样式块：

<style>
  g {display: none;}
  g:target {display: inline;}
</style>

然后假设您的 svg 中的图像都适合同一个视口，您需要做的就是对每个单独图像（路径、形状等）的部分进行分组，给组一个 id 并将根 svg 元素设置为视口大小。然后该组的 id 参考将是您在 css 中获得的内容。

最难的部分可能是让所有图像适合单个视口，因为inkscape 似乎有点随机地使路径命令相对或绝对，但我实际上是在重新制作整个东西；我能够将样式块中路径类的所有路径转换为“d”值，并摆脱任何转换，从而将文件大小减少了 40%。

【讨论】：