SVG符号中的线性渐变

Question

我有一个包含<linearGradient>的<symbol> svg精灵。我在同一<symbol>中使用fill="url(#id)"来填充这个渐变色到<g>中。但是，当我在其他文档中使用<use>加载<symbol>时，<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>

- Andrés

---

不要将linearGradient放在符号中，将其移动到<symbol>元素外部。 - Robert Longson

Answer 1

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

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

另外，正如Waruyama的答案中所指出的那样，请确保<defs>在<symbol>标签之外。

在这里找到了这个提示：here。

- Jarvis Johnson

---

谢谢。这让我疯狂，因为我可以看到当display:none没有设置时它可以正常工作，但我被困在线性（无双关语）思维中。 - Kevin

只是删除 display: none 并不将 <linearGradient> 从 <symbol> 中移除，这对我起了作用。我在 Chrome 90 中遇到了这个问题。 - Nasia Makrygianni

display: none和visibility: hidden都对我没用，只有在Safari 14.1和Chrome 91中使用position、height和width规则才有效。在Firefox 89中，任何解决方案都可以正常工作。将<defs>标签移动到<symbol>标签外部并没有改变任何东西，内部和外部都可以工作。 - Daniel Scharkov

Answer 2

如评论中指出的那样，将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>

- Waruyama

---

当我在另一个文件中加载 use 时，这段代码对我不起作用。 - Andrés