Defs pattern с модулем css - изменить точку в линейке c3.js, чтобы иметь изображение внутри

Question

Я использую c3.js, а мои компоненты используют CSS-модули. Я хотел бы изменить заливку точек в линейной диаграмме изображением. Для этого в методе визуализации я добавил Defs-узор -

render(){ 
    return (
      <div> 
      <defs> 
       <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1"> 
       <image x="0" y="0" src="http://dummyimage.com/20x20/faf2fa/0011ff.png&text=x" /> 
       </pattern> 
      </defs> 
      <C3Chart {...this.getConfig()}/> 
      </div> 
     ); 
} 

В стили CSS файл я добавил -

container :global(.c3-target-subscriber .c3-circle-5) { 
    fill: url(#image) !important; 
} 

Но ничего не происходит. Я просто хочу показать изображение в точке линейной диаграммы.

Любая помощь очень ценится.

Answer 1

Элемент <defs> должен иметь родительский элемент, который является элементом SVG, а не элементом HTML. Вам нужно что-то вроде этого:

<svg> 
    <defs> 
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1"> 
     <image x="0" y="0" src="http://dummyimage.com/20x20/faf2fa/0011ff.png&text=x" /> 
    </pattern> 
    </defs> 
<svg> 

Также ваш CSS указывает на что-то с идентификатором градиента, но идентификатор вашего шаблона - это изображение.