带有 css 模块的 Defs 模式 - 修改 c3.js 折线图中的点以在其中包含图像

Question

我正在使用 c3.js，我的组件正在使用 CSS 模块。我想用图像修改折线图中点的填充。为此，我在渲染方法中添加了 defs-pattern -

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 也指向一个 id 为渐变的东西，但你的图案的 id 是图像。