Символ SVG не показывает градиент - PullRequest
Новая
       27

Символ SVG не показывает градиент

0 голосов
/ 06 декабря 2018

Как, вероятно, отобразить линейный градиент в 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>

Взгляните на этот пример , где я пытаюсь разобраться во всех случаях использования включения символа svg через <use>.

Обновление:
Хм, странно, похоже, что он работает в Chrome, когда SVG находится в HTML.Однако, когда файл находится во внешнем файле (как показано в примере codesandbox), градиенты не будут отображаться.Я думаю, это проблема с <use>?

1 Ответ

0 голосов
/ 06 декабря 2018

элемент SVG ширина и высота - это явные атрибуты, а не стили: используйте вместо

...