Преобразование SVG-прямоугольника с фоновым изображением в черно-белый

Question

Я создаю точечные графики логотипов спортивных команд, используя d3 / svg, и заинтересован в том, чтобы сделать некоторые логотипы черно-белыми.Здесь (не беспокойтесь о несоблюдении всех переменных) приведено несколько строк кода, в которых я рисую логотипы.

logoMarkers
        .enter()
        .append('rect')
        .attr('transform', d => `translate(${(xScale(+d[xOption.value][xOption.objKey]) - 0.5 * logoRadius)}, ${(yScale(+d[yOption.value][yOption.objKey]) - 0.5 * logoRadius)})`)
        .attr('x', 0).attr('y', 0)
        .attr('height', logoRadius)
        .attr('width', logoRadius)
        .attr('fill', d => `url(#teamlogo-${d.teamId})`)
        .attr('cursor', 'pointer')
        .attr('opacity', d => this.props.focusTeam === 'none' ? 1 : (d.teamId === this.props.focusTeam ? 1 : 0.20));

... этот код делает все логотипы, кроме логотипа Duke, непрозрачными 0,20, однакоЯ также хотел бы сделать логотипы не герцога черно-белые.Это возможно?Я предпочел бы не сохранять на самом деле черно-белые версии логотипа в моем контейнере s3, откуда я извлекаю изображения, и предпочел бы просто преобразовать изображения в черно-белое как-то в моем коде.

Возможно ли это?Заранее спасибо !!

Answer 1

Добавьте следующее определение фильтра на вашу страницу.

<filter id="saturate">
  <feColorMatrix type="saturate" values="0"/>
</filter>

Затем добавьте следующее к элементам, не относящимся к Герцогу.

.attr('filter', 'url(#saturate)')

Пример:

<svg>
  <defs>
    <filter id="saturate">
      <feColorMatrix type="saturate" values="0"/>
    </filter>
  </defs>

  <circle cx="75" cy="75" r="75" fill="red" filter="url(#saturate)"/>
  <circle cx="150" cy="75" r="75" fill="green" filter="url(#saturate)"/>
  <circle cx="225" cy="75" r="75" fill="blue" filter="url(#saturate)"/>
</svg>