CSSモジュールでパターンを定義する - c3.js折れ線グラフの中に画像があるように画像を修正する

Question

私はc3.jsを使用しています。私のコンポーネントはCSSモジュールを使用しています。折れ線グラフの点の塗りつぶしを画像で修正したかったのです。私が追加したスタイルのCSSファイルで

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> 
     ); 
} 

- -

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

しかし、何も起こらないことについてrenderメソッドで私がDEFS-パターンを追加しました。私はちょうど折れ線グラフのポイントの内側に画像を表示したい。

ご協力いただきまして誠にありがとうございます。

Answer 1

<defs>要素には、HTML要素ではなくSVG要素である親が必要です。

<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は、グラデーションのIDを持つものを指していますが、パターンのIDはイメージです。