SVG 精灵可以作为列表样式图像吗？

Question

我可以使用 SVG 图像作为列表样式图像：

ul { list-style-image: url('my.svg'); }

但是如果我有一个 SVG 精灵，并且我想将它用于列表图像怎么办？ 那可能吗？

我曾考虑过使用

::before

伪元素，但我想知道是否有更“自然”的方式来实现这一点

Answer 1

您可以使用 SVG 片段标识符。

这是我在示例中使用的 SVG。这两个圆圈有一个 id，只有当它们是 :target 时才可见。

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      circle {
        display: none;
      }
      circle:target {
        display: inline;
      }
    </style>
  </defs>
  <circle id="c1" r="50" cx="50" cy="50" fill="orange" />
  <circle id="c2" r="50" cx="50" cy="50" fill="steelblue" />
</svg>

这里的示例中，SVG 的 URL 被替换为数据 URI。您可以在长数据 URI 的末尾添加

#c1

和

#c2

。但它的作用与

list-style-image: url('my.svg#c1')

相同。

ul.orange {
  list-style-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgY2lyY2xlIHsKICAgICAgICBkaXNwbGF5OiBub25lOwogICAgICB9CiAgICAgIGNpcmNsZTp0YXJnZXQgewogICAgICAgIGRpc3BsYXk6IGlubGluZTsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGNpcmNsZSBpZD0iYzEiIHI9IjUwIiBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ib3JhbmdlIiAvPgogIDxjaXJjbGUgaWQ9ImMyIiByPSI1MCIgY3g9IjUwIiBjeT0iNTAiIGZpbGw9InN0ZWVsYmx1ZSIgLz4KPC9zdmc+#c1');
}

ul.steelblue {
  list-style-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgY2lyY2xlIHsKICAgICAgICBkaXNwbGF5OiBub25lOwogICAgICB9CiAgICAgIGNpcmNsZTp0YXJnZXQgewogICAgICAgIGRpc3BsYXk6IGlubGluZTsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGNpcmNsZSBpZD0iYzEiIHI9IjUwIiBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ib3JhbmdlIiAvPgogIDxjaXJjbGUgaWQ9ImMyIiByPSI1MCIgY3g9IjUwIiBjeT0iNTAiIGZpbGw9InN0ZWVsYmx1ZSIgLz4KPC9zdmc+#c2');
}

<ul class="orange">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<ul class="steelblue">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>