2015-11-25 2 views
1

Я попытался установить цвет штриха. Она работает с использованием linearGradient, но он не работает с помощью solidColor:SVG штрих-код: linearGradient работает, но solidColor не

<svg class="svg_defs" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
     <linearGradient id="color_1"> 
      <stop offset="0" stop-color="red" stop-opacity="1"/> 
     </linearGradient> 

     <solidColor id="color_2" solid-color="blue" solid-opacity="1"/> 

     <linearGradient id="half"> 
      <stop offset="50%" stop-color="green" stop-opacity="0.5"/> 
      <stop offset="50%" stop-color="green" stop-opacity="0"/> 
     </linearGradient> 
    </defs> 
</svg> 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 101 101" width="50"> 
    <rect x="0" width="49%" height="99%" fill="url(#half)" stroke-width="2" stroke="url(#color_1)"/> 
    <rect x="50%" width="49%" height="99%" fill="url(#half)" stroke-width="2" stroke="url(#color_2)"/> 
</svg> 

rect ссылки color_1 работает, но не второй один ссылок color_2. Даже example on w3.org не работает. Ссылка должна показывать красные фигуры. Это происходит (или не происходит) в Firefox, Chrome и Safari.

Есть что-то не хватает?

Попробуйте:jsFiddle

+1

Есть что-то не хватает? Например, я бы сказал, что реализация браузера, но я не уверен. Кажется, что '' является частью спецификации SVGTiny1.2, не знают, как браузеры поддерживают его сегодня ... – Kaiido

+0

@Kaiido Я не заметил, что это * 1.2 *. Это может быть проблемой для недостающей реализации браузера. – lampshade

+0

http://www.w3schools.com/svg/tryit.asp?filename=trysvg_stroke0 –

ответ

1

solidColor не является частью SVG 1.1, она является частью SVG 1.2 крошечная и в слегка измененном и не обратно совместимым способом он предлагается стать частью предстоящей спецификации SVG 2.

У меня есть patch для Firefox, который будет осуществлять solidColor но только другой UA, который когда-либо поддерживаемое это было устаревшее Opera версии 12.

solidColor кажется довольно ненужным, учитывая, что он может эмулировать либо с одним стоп-градиент или переменные CSS. Если вы можете убедить некоторых других UA-разработчиков рассмотреть возможность их реализации, мой патч Firefox может приземлиться.

0

SolidColor не поддерживают с помощью любого браузера. Это также упоминается в рабочем проекте svg2, но я не знаю, когда он будет реализован.

Альтернатива вы можете использовать:

<rect x="50%" width="49%" height="99%" fill="url(#half)" stroke-width="2" stroke="blue" stroke-opacity="1"/> 

или

<linearGradient id="color_2"> 
     <stop offset="0%" stop-color="blue" stop-opacity="1"/> 
     <stop offset="100%" stop-color="blue" stop-opacity="1"/> 
    </linearGradient> 
Смежные вопросы