html - 从同一个 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) 并且这些“填充”的 View 框设置在 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>

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