Создание рабочего градиента svg с помощью d3

Я пытаюсь создать градиент 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. Я не уверен, что здесь происходит и как это исправить.


svg d3.js linear-gradients
person futuraprime    schedule 30.01.2015    source источник
comment
См. этот вопрос.   -  person Lars Kotthoff    schedule 30.01.2015

Ответы (1)


arrow_upward
2
arrow_downward

SVG чувствителен к регистру, поэтому для создания используется linearGradient, а не lineargradient.

Я думаю, что в Chrome есть ошибка селектора, из-за которой вы не можете выбирать элементы в верблюжьем корпусе.

Общим обходным путем, по-видимому, является назначение класса всем вашим элементам linearGradient и выбор по классу, а не по имени тега.

person Robert Longson    schedule 30.01.2015