SVG 符号不显示渐变答案

【问题标题】：SVG symbol not showing gradientSVG 符号不显示渐变
【发布时间】：2019-05-07 21:24:16
【问题描述】：

如何在 HTML 中显示来自 SVG <symbol> 的线性渐变？我尝试了以下方法，但不知何故，这只适用于 FireFox（版本 63）。在 chrome 和 safari 中，它没有加载渐变。我做错了什么，这是一个错误还是对此有“解决方法”？

W3 验证显示以下代码没有错误：

<!DOCTYPE html>
<html>

<head>
  <title>Gradient Problem</title>
  <meta charset="UTF-8" />
</head>

<body style="margin:0;overflow:hidden">

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="display:block">
    <defs>
      <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:#AE1C28" />
        <stop offset="30%" style="stop-color:#AE1C28" />
        <stop offset="40%" style="stop-color:#FFFFFF" />
        <stop offset="60%" style="stop-color:#FFFFFF" />
        <stop offset="70%" style="stop-color:#21468B" />
        <stop offset="100%" style="stop-color:#21468B" />
      </linearGradient>
    </defs>
    <symbol id="logo" viewbox="0 0 100 100" preserveAspectRatio="none">
      <rect width="100%" height="100%" x="0" y="0" fill="url(#grad1)" />
    </symbol>
  </svg>

  <svg style="width:100vw;height:100vh">
      <use xlink:href="#logo"></use>
    </svg>
</body>

</html>

看看this example，我尝试处理通过<use> 包含svg 符号的所有用例。

更新：
嗯，当 SVG 位于 HTML 中时，它似乎可以在 chrome 中工作。但是，当文件位于外部文件中时（如代码框示例中所示），则不会显示渐变。我猜这是<use> 的问题？

【问题讨论】：

显然是一个 Chrome 错误。请参阅SVG 2 spec：“如果引用的元素在外部文件中，则属性和样式属性中的所有 URL 引用必须是绝对的……在将值复制到元素实例之前。”
我怀疑这是同源问题。 HTML 和 SVG 来自不同的域（分别为 codesandbox.io 和 w7jjxyy2vk.codesandbox.io）。
@PaulLeBeau 我自己查了一下，但是根据网络日志，对w7jjxyy2vk.codesandbox.io/vector.svg的请求是成功的。
@ccprog 我已经改进了my codesandbox example，它现在还包括没有渐变的后备 svg，我添加了一个带有 SVG 的新页面，它使用对渐变的绝对引用。然而，绝对参考似乎没有任何帮助。在进行此更新时，我注意到 <text> 元素在引用内联 svg 时表现不同。
规范中的引用并不意味着您作为开发人员应该提供绝对引用，而是渲染器在为 <use> 内容构建影子 DOM 时，必须维护一个链接指向原始文件。这并不是为了解决您的问题，而是作为我认为这是一个错误的原因。

标签： html google-chrome svg safari gradient

【解决方案1】：

SVG 元素 width 和 height 是显式属性，而不是样式：使用而不是

【讨论】：