Question

我尝试通过以下方式将rect元素添加到clipPath：

    const mask = innerSpace
        .append('defs')
        .append('clipPath')
        .attr('id', `clipPath`);

    const rectMask = mask
        .append('rect')
        .attr('id', `mask`)
        .attr('width', width)
        .attr('height', height);

为了以这种方式使用它：

    const graphZone = innerSpace
        .append('g')
        .attr('width', width)
        .attr('height', height)
        .attr('clip-path', `url(#mask${this.uniqueId})`)
        .call(zoom);

但是rect的append（）不起作用，生成的html是：

<defs>
    <clipPath id="clipPath"></clipPath>
</defs>

您对发生的事情有任何想法吗？

谢谢。

Answer 1

我看不到问题，可以解决

var svg = d3.select("svg");
var width = 50, height=50;

const mask = svg
  .append('defs')
  .append('clipPath')
    .attr('id', `clipPath`);

const rectMask = mask
  .append('rect')
    .attr('id', `mask`)
    .attr('width', width)
    .attr('height', height);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="50" height="50"></svg>

d3js无法追加到clipPath

1 个答案: