SVG 符号中的线性渐变答案

【问题标题】：Linear gradient in SVG symbolSVG 符号中的线性渐变
【发布时间】：2018-09-21 07:59:34
【问题描述】：

我有一个带有<symbol> 的svg sprite，它包含一个<linearGradient>。我在同一个<symbol> 中使用fill="url(#id)" 的渐变提交<g>。但是，当我在其他文档中加载<symbol> 和<use> 时，<linearGradient> 不会加载。我可以看到填充的 url 指的是绝对路由而不是文档内部，并且无法正确加载。

如何在<symbol> 中加载<linearGradient>？

<symbol viewBox="0 0 550 90" width="100%" height="100%">
    <defs>
        <linearGradient id="gradient">
            <stop offset="-1.04974" stop-color="#D8D8D8">
                <animate attributeName="offset" values="-2; 1" dur="1s" repeatCount="indefinite"></animate>
            </stop>
            <stop offset="-0.549739" stop-color="#EEEEEE">
                <animate attributeName="offset" values="-1.5; 1.5" dur="1s" repeatCount="indefinite"></animate>
            </stop>
            <stop offset="-0.0497395" stop-color="#D8D8D8">
                <animate attributeName="offset" values="-1; 2" dur="1s" repeatCount="indefinite"></animate>
            </stop>
        </linearGradient>
    </defs>
    <g fill="url(#gradient)">
        <rect x="0" y="0" width="100" height="15"/> 
        <rect x="10" y="25" width="130" height="15" />                              
    </g>
</symbol>

【问题讨论】：

不要将linearGradient放在符号中，将其移到元素之外。

标签： svg gradient symbols fill linear-gradients

【解决方案1】：

对我来说，我的<svg> 标签上有display: none，其中包含我的<defs> 和<symbols>。

确保初始 svg 没有设置 display:none - 请改用 height: 0; width: 0; position: absolute; visibility: hidden。

同样如 Waruyama 的回答中所述，确保 <defs> 在 <symbol> 标记之外。

发现这个提示here。

【讨论】：

谢谢。这让我发疯，因为我可以看到它在 display:none 未设置时运行良好，但我陷入了线性（没有双关语）思维。
只是删除 display: none 而不是从 <symbol> 中删除 <linearGradient> 对我有用。我只在 Chrome 90 中遇到过这个问题
display: none 和 visibility: hidden 对我都不起作用，只有 position、height 和 width 规则在 Safari 14.1 和 Chrome 91 中很疯狂。在 Firefox 89 中任何解决方案工作正常。将<defs> 标签移到<symbol> 标签之外并没有改变任何东西，内部和外部都有效。

【解决方案2】：

正如 cmets 中所指出的，将 linearGradient 放在 symbol 之外。

这是一个修改后的例子：

<svg style="visibility:hidden; width: 0; height: 0;">
  <defs>
    <linearGradient id="gradient">
        <stop offset="-1.04974" stop-color="#D8D8D8">
            <animate attributeName="offset" values="-2; 1" dur="1s" repeatCount="indefinite"></animate>
        </stop>
        <stop offset="-0.549739" stop-color="#EEEEEE">
            <animate attributeName="offset" values="-1.5; 1.5" dur="1s" repeatCount="indefinite"></animate>
        </stop>
        <stop offset="-0.0497395" stop-color="#D8D8D8">
            <animate attributeName="offset" values="-1; 2" dur="1s" repeatCount="indefinite"></animate>
        </stop>
    </linearGradient>
    <symbol id="symbol1" viewBox="0 0 550 90" width="100%" height="100%">
      <g fill="url(#gradient)">
        <rect x="0" y="0" width="100" height="15"/> 
        <rect x="10" y="25" width="130" height="15" />                              
      </g>
    </symbol>
  </defs> 
</svg>


<svg width="400" height="400">
  <use xlink:href="#symbol1"></use>
</svg>

【讨论】：

当我在另一个文件中加载 use 时，此代码对我不起作用。