内联 SVG 代码不显示 svg 图标答案

【问题标题】：Inlining SVG code not displaying svg icon内联 SVG 代码不显示 svg 图标
【发布时间】：2021-07-23 13:54:39
【问题描述】：

直觉上我觉得这是可能的，但是在谷歌搜索之后，我仍然没有得到显示自定义 svg 图标的预期结果。

预期结果：使用自定义 svg 图标呈现 <li> 项目符号，其中 svg 代码在 <head> 部分中“定义”，理想情况下未在其自己的 svg 文件中定义。

当前结果：没有项目符号显示，自定义或“默认”

代码示例：

<!--HTML file -->
<head>

<!--
 ...other head stuff here...
-->

<!--Testing SVG embed-->
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7 10L9 12L13 8M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z" stroke="#96D8A0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <!--I think use the xlink:href attrib to make the svg 'referencable'?? -->
            <use xlink:href="item-checkbox@18.svg"></use>
        </svg>
</head>

/*.css file*/

/* class controlling <li> element styling */

.checkbox-items li{
    list-style-image: url("/item-checkbox18.svg");
}

但是，这种方法没有任何显示。当我通过 CDN 为它们提供服务时，复选框项目 do 会显示，但理想情况下，SVG 会在文档本身中呈现，因此要从外部加载的内容更少。

【问题讨论】：

我怀疑 use 标签没有达到您的预期，请参阅 [link]developer.mozilla.org/en-US/docs/Web/SVG/Element/use

标签： html css svg

【解决方案1】：

防止在 DOM 中出现“额外”SVG 的一种方法是内联它。这样你的样式就完全在你的 CSS 中了。

那里有不同的转换器，我只是使用了我遇到的第一个。

.checkbox-items li{
    list-style-image: url("data:image/svg+xml, %3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10L9 12L13 8M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z' stroke='%2396D8A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

<ul class="checkbox-items">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

【讨论】：