使用 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 为图像。

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

Defs pattern with css module - modify point in c3.js line chart to have an image inside

reactjs

c3.js

css-modules