Как я могу использовать градиенты из символов SVG в других файлах? - PullRequest
Новая
       25

Как я могу использовать градиенты из символов SVG в других файлах?

0 голосов
/ 22 марта 2019

Я обнаружил, что когда у меня есть исходный SVG с символом и целевой SVG, который обращается к исходному SVG с <use>, символ импортируется и может получить доступ к градиенту (возможно, потому что он уже находится на страница). Однако если исходный SVG находится в другом файле, объекты в <symbol> импортируются, но не градиент. Как я могу также импортировать градиент?

Вот код MCVE:

index.html: 

<style>
  html,body,svg { width: 100% }
</style>

<!-- inline SVG with gradient -->
<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
    <linearGradient id="linear-gradient" x1="0.133" y1="0.008" x2="0.949" y2="1.101" gradientUnits="objectBoundingBox">
      <stop offset="0.042" stop-color="#21dbaa"/>
      <stop offset="0.358" stop-color="#00b4ef"/>
      <stop offset="0.433" stop-color="#01a7ec"/>
      <stop offset="0.568" stop-color="#0487e4"/>
      <stop offset="0.68" stop-color="#0768dd"/>
      <stop offset="0.965" stop-color="#5f1ae5"/>
    </linearGradient>
    <circle cx="1" cy="1" r="1" fill="url(#linear-gradient)"/>
  </symbol>
</svg>

<svg viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
 
  <!-- All instances of our symbol -->
  <use xlink:href="#myDot" x="5"  y="5" style="opacity:1.0" />
  <use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" />
  <use xlink:href="symbol.svg#myDot" x="35" y="5" style="opacity:0.6" stroke="black" stroke-width=".1" />
  <use xlink:href="symbol.svg#myDot" x="50" y="5" style="opacity:0.4" stroke="black" stroke-width=".1" />
  <use xlink:href="symbol.svg#myDot" x="65" y="5" style="opacity:0.2" stroke="black" stroke-width=".1" />
</svg>

symbol.svg: 

<!-- external SVG with gradient -->
<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
    <linearGradient id="linear-gradient" x1="0.133" y1="0.008" x2="0.949" y2="1.101" gradientUnits="objectBoundingBox">
      <stop offset="0.042" stop-color="#21dbaa"/>
      <stop offset="0.358" stop-color="#00b4ef"/>
      <stop offset="0.433" stop-color="#01a7ec"/>
      <stop offset="0.568" stop-color="#0487e4"/>
      <stop offset="0.68" stop-color="#0768dd"/>
      <stop offset="0.965" stop-color="#5f1ae5"/>
    </linearGradient>
    <circle cx="1" cy="1" r="1" fill="url(#linear-gradient)"/>
  </symbol>
</svg>

Вот рабочая демонстрация Codepen , которая иллюстрирует проблему, используя тот же код, как показано выше. Обратите внимание, что два круга, импортирующие символ из встроенного SVG в index.html, правильно отображают градиент, но три круга, импортирующие символ из symbol.svg, не отображают градиент.

Редактировать: Это может быть дубликат другой вопрос , спрашивающий о ссылке на градиенты во внешних файлах.

1 Ответ

0 голосов
/ 22 марта 2019

Похоже, поддержка браузером этой функции все еще несколько низкая ( источник ).Пример, приведенный в вопросе, теоретически должен сработать через пару лет.

Один из способов - включить определения градиента на каждой странице, где есть ссылки на внешние SVG, и указать на это вместо этого.

index.html: 

<svg style="height: 0; width: 0;" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="linear-gradient" x1="0.133" y1="0.008" x2="0.949" y2="1.101" gradientUnits="objectBoundingBox">
        <stop offset="0.042" stop-color="#21dbaa"/>
        <stop offset="0.358" stop-color="#00b4ef"/>
        <stop offset="0.433" stop-color="#01a7ec"/>
        <stop offset="0.568" stop-color="#0487e4"/>
        <stop offset="0.68" stop-color="#0768dd"/>
        <stop offset="0.965" stop-color="#5f1ae5"/>
      </linearGradient>
    </defs>
</svg>

<svg>
    <use xlink:href="#myDot" fill="url(#linear-gradient)" />
</svg>

symbol.svg: 

<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
    <circle cx="1" cy="1" r="1" fill="url(#linear-gradient)"/>
  </symbol>
</svg>
...