Линейный градиент в символе SVG - PullRequest
Новая
       51

Линейный градиент в символе SVG

0 голосов
/ 21 сентября 2018

У меня есть svg-спрайт с <symbol>, который содержит <linearGradient>.Я регистрирую <g> в этом же <symbol> с этим градиентом на fill="url(#id)".Однако, когда я загружаю <symbol> с <use> в другом документе, <linearGradient> не загружается.Я вижу, что URL-адрес заполнения ссылается на абсолютный маршрут, а не внутри документа, и загружается неправильно.

Как я могу загрузить <linearGradient> в <symbol>? 

<symbol viewBox="0 0 550 90" width="100%" height="100%">
    <defs>
        <linearGradient id="gradient">
            <stop offset="-1.04974" stop-color="#D8D8D8">
                <animate attributeName="offset" values="-2; 1" dur="1s" repeatCount="indefinite"></animate>
            </stop>
            <stop offset="-0.549739" stop-color="#EEEEEE">
                <animate attributeName="offset" values="-1.5; 1.5" dur="1s" repeatCount="indefinite"></animate>
            </stop>
            <stop offset="-0.0497395" stop-color="#D8D8D8">
                <animate attributeName="offset" values="-1; 2" dur="1s" repeatCount="indefinite"></animate>
            </stop>
        </linearGradient>
    </defs>
    <g fill="url(#gradient)">
        <rect x="0" y="0" width="100" height="15"/> 
        <rect x="10" y="25" width="130" height="15" />                              
    </g>
</symbol>

Ответы [ 2 ]

0 голосов
/ 26 апреля 2019

Для меня у меня было display: none на моем <svg> теге, который содержал мои <defs> и <symbols>.

Убедитесь, что в исходном svg не установлено display:none - используйте height: 0; width: 0; position: absolute; visibility: hidden вместо этого.

Также, как отмечено в ответе Варуямы, убедитесь, что <defs> находятся за пределами тега <symbol>.

Найден этот намек здесь .

0 голосов
/ 21 сентября 2018

Как указано в комментариях, поместите linearGradient за пределы symbol.

Вот модифицированный пример, который работает: 

<svg style="visibility:hidden; width: 0; height: 0;">
  <defs>
    <linearGradient id="gradient">
        <stop offset="-1.04974" stop-color="#D8D8D8">
            <animate attributeName="offset" values="-2; 1" dur="1s" repeatCount="indefinite"></animate>
        </stop>
        <stop offset="-0.549739" stop-color="#EEEEEE">
            <animate attributeName="offset" values="-1.5; 1.5" dur="1s" repeatCount="indefinite"></animate>
        </stop>
        <stop offset="-0.0497395" stop-color="#D8D8D8">
            <animate attributeName="offset" values="-1; 2" dur="1s" repeatCount="indefinite"></animate>
        </stop>
    </linearGradient>
    <symbol id="symbol1" viewBox="0 0 550 90" width="100%" height="100%">
      <g fill="url(#gradient)">
        <rect x="0" y="0" width="100" height="15"/> 
        <rect x="10" y="25" width="130" height="15" />                              
      </g>
    </symbol>
  </defs> 
</svg>


<svg width="400" height="400">
  <use xlink:href="#symbol1"></use>
</svg>
...