从同一个 svg 文件链接的 SVG 导致一个消失

Question

这很奇怪。

我有以下内容：

<svg aria-hidden="true">
   <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>

<table>
    <tr>
        <td>
            <svg aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
            </svg>
        </td>
    </tr>
</table>

第一个图标不显示。但是，如果我将第一个的 svg 文件更改为：

<svg aria-hidden="true">
   <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#down"></use>
</svg>

然后两者都显示，同一个文件中的 SVG 是否缺少某些东西？

这绝对不是 URL 的事情，因为如果两个 <svg> 标签使用相同的 URL，那么只会显示第二个。

非常感谢

Answer 1

希望这对所有新人都有帮助

这么多年来，我偶然发现了同样的问题并解决了它...... 对我来说发生的事情是我的路径的填充属性共享相同的 url(#paint0_linear) 和这些“填充”的视图框，这些“填充”设置在 DOM 中第一个 SVG 的位置上，要解决这个问题，只需更改名称填充后续 SVGS（及其对应的 id）。

英语不是我的母语，所以让我告诉你我在代码中做了什么，以防我没有说清楚：

<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g id="hamb1">
          <path id="hambBottom1" fillRule="evenodd" clipRule="evenodd" d="M0 22" fill="url(#paint0_linear)"/>
          <path id="hambTop1" d="M13.8599" fill="url(#paint1_linear)"/>
        </g>
        <defs>
          <linearGradient id="paint0_linear" x1="-6.5" y1="30" x2="18.9429" y2="34.8415" gradientUnits="userSpaceOnUse">
            <stop stopColor="#134F82"/>
            <stop offset="1" stopColor="#2BA665"/>
          </linearGradient>
          <linearGradient id="paint1_linear" x1="-6.50012" y1="30" x2="18.9428" y2="34.8414" gradientUnits="userSpaceOnUse">
            <stop stopColor="#134F82"/>
            <stop offset="1" stopColor="#2BA665"/>
          </linearGradient>
        </defs>
      </svg>

检查NEVER路径上的fill属性是否共享相同的ID。

Answer 2

我不能完全确定，因为我猜你应该正确解释问题，但可能是第一个文件路径可能不正确（即链接“/assets/icons/utility-sprite/svg/symbols .svg#down") （即可能是一些拼写错误）所以文件没有加载。尝试使用 url 手动加载文件。