SVG 图标不可见

Question

我不知道下面的 SVG 代码可能有什么问题。在浏览器中是不显示的，但是直接显示的话很好看。如果我将 CSS 中的它们替换为任何其他 SVG，它们都会显示出来。

ul.custom li:before {
content: '';
position: absolute;
    height: 23px;
width: 23px;
left: 0;
top: 50%;
transform: translateY(-50%);
background-size: contain;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="none"><g fill="#CC902D" clip-path="url(#a)"><path d="M10.748 16.251a.65.65 0 0 1-.461-.191l-4.53-4.54a.652.652 0 0 1 0-.922l2.165-2.165a.652.652 0 0 1 .46-.19h.001a.65.65 0 0 1 .461.191l1.905 1.913 3.408-3.408a.652.652 0 0 1 .921 0l2.165 2.165a.652.652 0 0 1 0 .921l-6.035 6.036a.651.651 0 0 1-.46.19Zm-3.61-5.191 3.61 3.618 5.114-5.113-1.244-1.244-3.41 3.41a.652.652 0 0 1-.46.19h-.001a.65.65 0 0 1-.461-.191L8.38 9.816 7.138 11.06Z"/><path d="M22.349 23H.65A.651.651 0 0 1 0 22.349V.65C0 .291.292 0 .651 0h21.697c.36 0 .652.292.652.651v17.302a.651.651 0 1 1-1.303 0V1.303H1.303v20.394h21.045a.651.651 0 1 1 0 1.303Z"/><path d="M19.184 19.836H3.815a.651.651 0 0 1-.651-.651V6.929a.651.651 0 1 1 1.303 0v11.604h14.066V4.467H3.815a.651.651 0 1 1 0-1.303h15.37c.36 0 .65.292.65.652v15.369c0 .36-.29.651-.65.651Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h23v23H0z"/></clipPath></defs></svg>');

}

Answer 1

我已经尝试过你的代码，但很可能你缺少将

position: relative;

包含到

ul.custom li

:

ul.custom li {
  position: relative;
  padding-left: 30px; /*  some padding to text */
}

ul {
  list-style: none;
  margin:0;
  padding: 0;
}
ul.custom li {
  position: relative;
  padding-left: 30px;/*  some padding to text */
}

ul.custom li:before {
  content: "";
  position: absolute;
  height: 23px;
  width: 23px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="none"><g fill="%23CC902D" clip-path="url(%23a)"><path d="M10.748 16.251a.65.65 0 0 1-.461-.191l-4.53-4.54a.652.652 0 0 1 0-.922l2.165-2.165a.652.652 0 0 1 .46-.19h.001a.65.65 0 0 1 .461.191l1.905 1.913 3.408-3.408a.652.652 0 0 1 .921 0l2.165 2.165a.652.652 0 0 1 0 .921l-6.035 6.036a.651.651 0 0 1-.46.19Zm-3.61-5.191 3.61 3.618 5.114-5.113-1.244-1.244-3.41 3.41a.652.652 0 0 1-.46.19h-.001a.65.65 0 0 1-.461-.191L8.38 9.816 7.138 11.06Z"/><path d="M22.349 23H.65A.651.651 0 0 1 0 22.349V.65C0 .291.292 0 .651 0h21.697c.36 0 .652.292.652.651v17.302a.651.651 0 1 1-1.303 0V1.303H1.303v20.394h21.045a.651.651 0 1 1 0 1.303Z"/><path d="M19.184 19.836H3.815a.651.651 0 0 1-.651-.651V6.929a.651.651 0 1 1 1.303 0v11.604h14.066V4.467H3.815a.651.651 0 1 1 0-1.303h15.37c.36 0 .65.292.65.652v15.369c0 .36-.29.651-.65.651Z"/></g><defs><clipPath id="a"><path fill="%23fff" d="M0 0h23v23H0z"/></clipPath></defs></svg>');
}

<ul class="custom">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>