Question

如何通过SVG <symbol>在HTML中显示线性渐变？我尝试了以下操作，但是以某种方式只能在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中使用。但是，当文件位于外部文件中时（如codesandbox示例所示），则不会显示渐变。我猜这是<use>的问题吗？

Answer 1

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

SVG符号未显示渐变

1 个答案: