SVG заливка типа linearGradient не отображается

Я надеюсь, что кто-то из вас может столкнуться с этим странным поведением линейного градиента SVG, который не отображается соответственно. применяется вообще в стандартных браузерах. Другие свойства, поскольку удар работает, как ожидалось, но не заполняет! Элемент кажется прозрачным.SVG заливка типа linearGradient не отображается

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

<svg viewBox="0 12.705 512 486.59" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="20" width="20" style="margin-right: 0px;"> 
    <defs> 
     <linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="jRate_grad1">   
      <stop stop-color="white" offset="0%"/> 
      <stop stop-color="yellow" offset="100%"/> 
     </linearGradient> 
    </defs> 
    <polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 " style="fill: url(#jRate_grad1);stroke:black;fill-opacity:1;stroke-width:2px;"/> 
</svg>

код SVG генерируется рейтинговым JQuery плагин jRate.

Установка тестового сайта, которая воспроизводит «ошибку», может быть найдена here. Элементами SVG являются те маленькие поперечные символы в столбце таблицы «Bewertung».

источник

2015-08-17 Steven

своп две остановки элементы – birdspider

В соответствии со значением смещения SVG specification

Каждый градиент требуется, чтобы быть равным или больше, чем значение смещения предыдущего градиента, в. Если заданное значение смещения стопа градиента не равно или больше, чем все предыдущие значения смещения, тогда значение смещения устанавливается равным самому большому из всех предыдущих значений смещения.

Ваши значения смещения уменьшаются, а не увеличиваются, поэтому вы не увидите градиент.

Другая проблема на вашем сайте (но не в вашем вопросе) заключается в том, что вы используете базовый тег.

<base href="http://kisters-dev.crealistiques.de/">

Это означает, что

fill: url(#rating_40_grad2)

становится

fill: url(http://kisters-dev.crealistiques.de/#rating_40_grad2)

потому что that's what base tags do. Но linearGradient находится на самой странице, которая находится по адресу http://kisters-dev.crealistiques.de/datatable/

Нет совпадений, без градиента.

источник

2015-08-17 12:46:59

Спасибо вам Роберт! – Steven

Оказалось, что порядок определения цвета останова не имеет значения, и заполнение еще не отображается! Как уже упоминалось в моем первоначальном вопросе, должны быть некоторые побочные эффекты, потому что один и тот же код работает в другой среде/на другой странице. – Steven

cars10 ответ выше уверен работает для меня в моем браузере. Если что-то происходит, это не в том, что вам сложно помочь. –

Как Роберт сказал:

<svg viewBox="0 12.705 512 486.59" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="200" width="200" style="margin-right: 0px;"> 
 
    <defs> 
 
     <linearGradient id="grad1">   
 
      <stop stop-color="yellow" offset="0%"/> 
 
      <stop stop-color="white" offset="100%"/> 
 
     </linearGradient> 
 
    </defs> 
 
    <polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566" style="fill: url(#grad1);stroke:black;fill-opacity:1;stroke-width:9px;"/> 
 
</svg>

источник

2015-08-17 12:47:10 cars10m

К сожалению, это не решит проблему. – Steven

SVG заливка типа linearGradient не отображается

ответ

Смежные вопросы