ClipPath隐藏原始形状-d3 ReactJS

Question

我是D3和ReactJS的新手，试图用直线修剪圆，但无法了解它的工作原理。我有这段HT​​ML代码可以绘制图像；

  <div >

          <svg xmlns="http://www.w3.org/2000/svg" version="1.1"  className="clip-path" ref={this.attachCircle.bind(this)}>

          </svg>
        </div>

这是我绘制图像的功能；

attachCircle = (svgRef:SVGElement) => {

const svg = d3.select(svgRef);
// draw a circle

  svg.append("circle")            // shape it as an ellipse
    .attr("cx", 100)            // position the x-centre
    .attr("cy", 80)            // position the y-centre
    .attr("r", 80)            // set the x radius
        .attr("fill", "SteelBlue")
}

它以这种方式产生；

但我将clipPath添加到圈子中即可；

svg.append("clipPath")       // define a clip path
    .attr("id", "clip") // give the clipPath an ID
  .append("circle")            // shape it as an ellipse
    .attr("cx", 100)            // position the x-centre
    .attr("cy", 80)            // position the y-centre
    .attr("r", 80)            // set the x radius
        .attr("fill", "SteelBlue")

它在屏幕上什么都不显示。它没有画任何圆或任何东西。

  

谁能解释为什么会这样？或我想念什么？

Answer 1

您需要使用use

 <use clip-path="url(#clip)" xlink:href="#clip" fill="red" />

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath