Я пытаюсь создать градиент SVG (для обводки) с помощью D3 (остальная часть проекта использует D3, поэтому использование D3 для этого, казалось, имело смысл...)
Вот код, который генерирует градиент:
function generateBlindGradient(svg, color, side) {
// can't have a hash mark in the id or bad things will happen
idColor = color.replace('#', '');
side = side || 'right';
// this is a sneaky d3 way to select the element if present
// or create the element if it isn't
var defs = svg.selectAll('defs').data([0]);
defs.enter().append('svg:defs');
var id = 'gradient-' + idColor + '-' + side;
var gradient = defs.selectAll('lineargradient#'+id).data([0]);
gradient.enter().append('svg:lineargradient')
.attr('id', id);
var colors = [
{ offset : '50%', color : '#DFE2E6' },
{ offset : side === 'left' ? '100%' : '0%', color : color }
];
var stops = gradient.selectAll('stop').data(colors);
stops.enter().append('svg:stop');
stops.attr('stop-color', function(d) { return d.color; })
.attr('offset', function(d) { return d.offset; });
return id;
}
Это работает... почти правильно. Он генерирует такие градиенты:
<lineargradient id="gradient-a8d4a1-left">
<stop stop-color="#DFE2E6" offset="50%"></stop>
<stop stop-color="#a8d4a1" offset="100%"></stop>
</lineargradient>
Этот градиент не работает (как fill
, так и stroke
) — элемент, к которому он применяется, не получает ни обводки, ни заливки.
Если я использую веб-инспектор для «редактирования HTML» элемента lineargradient
, даже если я ничего не меняю, градиенты внезапно начинают работать — так что я предполагаю, что происходит что-то странное в парсинге SVG в Chrome или генерации элемента d3.
Я думаю, что это может быть связано с путаницей между lineargradient
и linearGradient
— кажется, у d3 есть некоторые проблемы с элементами в верблюжьем стиле, и когда я создаю элементы linearGradient
, он их не выбирает (и я получаю много-много копий). Кроме того, в инспекторе Chrome эти элементы отображаются как lineargradient
; когда я редактирую как HTML, они linearGradient
. Я не уверен, что здесь происходит и как это исправить.