Градиентный цвет Рафаэль

Question

Когда в Рафаэле я установил цвет 90-#7ADADD-#338A93 по пути, он станет градиентом. Затем, когда я проверяю элемент, я вижу, что свойство fill имеет значение: url(#490-_7ADADD-_338A93).

Если я попытаюсь изменить его на 90-#7ADADD-#338A93, он станет черным. Вопрос в том, как изменить цвет градиента извне? Как я могу рассчитать это url(#490-_7ADADD-_338A93) от моего оригинала 90-#7ADADD-#338A93?

Answer 1

Если вы посмотрите на полный исходный код SVG может выглядеть как этот

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <defs> 
    <linearGradient id="490-_7ADADD-_338A93" x1="0%" y1="0%" x2="100%" y2="0%"> 
     .... 
    </linearGradient> 
    </defs> 
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#490-_7ADADD-_338A93)" /> 
</svg> 

url(...) часть на самом деле ссылка на градиент, определенного в defs. Если вы измените ссылку на то, что не существует, оно будет отображаться с черным заполнением.

Логическая вещь, которую нужно сделать в Рафаэле, - сохранить ваши градиентные манипуляции внутри библиотеки. Если вы делаете ...

path.attr({"fill": "90-#fff-#000"}) 
path.attr({"fill": "90-#ccc-#666"}) 

Тогда Рафаэль будет вставить новую linearGradient и ссылаться на него для вас.

Если вы действительно нужно манипулировать источник SVG, то вы можете сделать что-то вроде ...

var gradient = document.getElementById('490-_7ADADD-_338A93'); 
var stops = gradient.querySelectorAll('stop'); 
stops[0].setAttribute("stop-color", "#c00"); 
stops[1].setAttribute("stop-color", "#00c"); 

Но это нарушит совместимость VML (IE 8 или меньше).