linearGradient 不适用于 SVG 精灵

Question

我正在尝试将所有 svg 图标合并到一个 sprite 文件中 like this 以用于组织、缓存和其他目的。但由于某种原因，linearGradient 未被应用

  <?xml version="1.0" encoding="utf-8"?>
  <svg version="1.1" id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
   y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <!-- other icons -->
    <!-- ... -->
    <g id="toggle">
      <path d="M4,7.992c-2.206,0-4-1.794-4-4c0-2.206,1.794-4,4-4h10c2.206,0,4,1.794,4,4c0,2.206-1.794,4-4,4H4z"/>
      <circle fill="url('#toggle-linear-gradient')" cx="14" cy="3.992" r="3"/>
      <defs>
        <linearGradient id="toggle-linear-gradient" gradientUnits="userSpaceOnUse" x1="14" y1="0.9922" x2="14" y2="6.9922">
          <stop offset="0" stop-color="#FFFFFF"/>
          <stop offset="1" stop-color="#8C8C8B"/>
        </linearGradient>
      </defs>
    </g>
  </svg>

现在，在文件预览中我可以正确看到应用了渐变的圆圈

当我尝试像这样将它导入我的 HTML 时

<svg>
  <use href="#toggle" xlink:href="#toggle"></use>
</svg>

圆圈未使用定义的渐变着色

当我将 <linearGradient> 移出 svg 文件时，它起作用了，但为什么呢？

<svg>
  <linearGradient id="toggle-linear-gradient" gradientUnits="userSpaceOnUse" x1="14" y1="0.9922" x2="14" y2="6.9922">
    <stop offset="0" stop-color="#FFFFFF"/>
    <stop offset="1" stop-color="#8C8C8B"/>
  </linearGradient>
  <use href="#toggle" xlink:href="#toggle"></use>
</svg>

即使它有效，问题是，如果某些样式只能从外部定义，那么这会破坏将所有图标保存在一个文件中的目的。显示相同的图标将迫使我多次定义相同的渐变。希望将所有内容都放在同一个文件中。有什么想法或见解吗？

P.S。导入为 <img> 可正确显示圆形渐变。

Answer 1

很确定，您已经通过 display:none 隐藏了主要的 svg 资产文件。

如果将其更改为 visibility:hidden，它应该可以工作：

function unhide(){
  document.querySelector('.dsp-non').classList.remove('dsp-non');
}

.svgAssetHidden{
  visibility:hidden;
  position:absolute;
  width:0px;
  height:0px;
  overflow:hidden;
}

.svgIcon{
  display:inline-block;
  width:10em;
}

.dsp-non{
  display:none;
}

<button onclick="unhide()">remove display:none</button>

<h3>visibility:hidden</h3>
<svg class="svgIcon" viewBox="0 0 50 20">
  <use href="#toggle" href="#toggle"></use>
</svg>

<h3>display:none</h3>
<svg class="svgIcon" viewBox="0 0 50 20">
  <use href="#toggle2" href="#toggle"></use>
</svg>

<svg class="svgAssetHidden" id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
   y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <!-- other icons -->
    <!-- ... -->
    <g id="toggle">
      <path d="M4,7.992c-2.206,0-4-1.794-4-4c0-2.206,1.794-4,4-4h10c2.206,0,4,1.794,4,4c0,2.206-1.794,4-4,4H4z"/>
      <circle fill="url('#toggle-linear-gradient')" cx="14" cy="3.992" r="3"/>
      <defs>
        <linearGradient id="toggle-linear-gradient" gradientUnits="userSpaceOnUse" x1="14" y1="0.9922" x2="14" y2="6.9922">
          <stop offset="0" stop-color="#FFFFFF"/>
          <stop offset="1" stop-color="#8C8C8B"/>
        </linearGradient>
      </defs>
    </g>
  </svg>


<svg class="svgAssetDspNon dsp-non" id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
   y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <!-- other icons -->
    <!-- ... -->
    <g id="toggle2">
      <path d="M4,7.992c-2.206,0-4-1.794-4-4c0-2.206,1.794-4,4-4h10c2.206,0,4,1.794,4,4c0,2.206-1.794,4-4,4H4z"/>
      <circle fill="url('#toggle-linear-gradient2')" cx="14" cy="3.992" r="3"/>
      <defs>
        <linearGradient id="toggle-linear-gradient2" gradientUnits="userSpaceOnUse" x1="14" y1="0.9922" x2="14" y2="6.9922">
          <stop offset="0" stop-color="#FFFFFF"/>
          <stop offset="1" stop-color="#8C0000"/>
        </linearGradient>
      </defs>
    </g>
  </svg>

通过 display:none 隐藏 svg 也会破坏一些其他功能，例如过滤器。

linearGradient 不适用于 SVG 精灵

linearGradient not working for SVG sprites

html

svg

sprite

linear-gradients

sprite-sheet