Как я могу ссылаться на radialGradient из другого встроенного элемента SVG?

Question

Я строю решение для значков с использованием SVG, где части значков должны использоваться повторно. Есть несколько разных <svg /> элементы, встроенные в мой HTML-документ, и <use /> Элемент отлично подходит для повторного использования фигур - каналов, путей и т. д. даже между элементами SVG.

Тем не менее, повторное использование других определений, таких как <radialGradient /> не работает для меня Когда градиент определен в пределах <defs /> элемент в том же <svg /> элемент, он работает, как ожидалось, но не тогда, когда градиент определяется в другом <svg /> элемент.

Псевдокод

<!-- Near the top of my BODY element -->
<!-- This is where I keep the SVG stuff I want to reuse -->
<svg id="for-reuse" style="display:none">
  <defs>
    <path id="marker" d="M63 127L49 93C44 80 52 69 63 69L64 69C75 69 83 80 78 93L64 127" />
    <radialGradient id="shadow">
      <stop offset="10%" stop-color="rgba(0,0,0,0.4)" />
      <stop offset="90%" stop-color="rgba(0,0,0,0)" />
    </radialGradient>
  </defs>
</svg>

<!-- Further down the html document -->
<svg viewBox="0 0 128 128" style="width:64px; height:64px" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- This use element works fine! -->
  <use xlink:href="#marker" style="fill:black" />

  <!-- But this fill attribute does not! -->
  <rect x="5" y="5" width="20" height="20" fill="url(#shadow)" />
</svg>

Почему это возможно use формы из других svg элементы, но не значения атрибутов, как это? Когда я двигаю shadow градиент в defs элемент внутри видимого элемента SVG, ссылка работает отлично.

Вот JSFiddle, который иллюстрирует как работающий, так и нерабочий: https://jsfiddle.net/7tfna0L8/2/

Решение

Robert Longson отметил, что мой "репозиторий" многоразового использования SVG имел style из display:none, Для меня это похоже на правильный способ сделать это. В конце концов, этот репозиторий не должен отображаться каким-либо образом. Проблема в том, что браузер оптимизирует это, вероятно, даже не анализируя какой-либо стиль, что позволяет ссылаться на элементы, но не на стиль (например, мой градиент)

Работающий jsFiddle: https://jsfiddle.net/atornblad/7tfna0L8/3/

Answer 1

Ваш дальний градиент находится в SVG, который имеет стиль отображения: нет. Это отключает весь CSS внутри этого фрагмента, поэтому он не работает. Попробуйте width="0" height="0" вместо display:none.