Question

我是这个论坛的新手，我一直通过谷歌搜索使用它，这对我帮助很大，但我发现我偶然发现了一个非常不寻常的问题。我正在尝试从圆圈创建剪贴蒙版。我在这里粘贴了代码（编辑为更易读），欢迎任何帮助。

结果应该是一个灰色圆圈，而不是黄色圆圈。

    var circles = svg.selectAll("circleMale")
        .attr("id", "ellipse-clip")
        .data(exhibits)
        .enter()
        .append("svg:circle")

        //.attr("title", function(d) { return nameFn(d); })
        //.attr("fill", "#CCCCCCC")
        .attr("fill", "#FFFF00")

        .attr("stroke-width", 3)
        .attr("stroke", "#FFFFFF")
        .attr("r",100)
        .attr("cx",500)
        .attr("cy",500)
        .attr("opacity", 0.2)

    var clippingPath = svg.append("rect")       
        .attr("x", 125)       
        .attr("y", 75)        
        .attr("clip-path", "url(ellipse-clip)") 
        .style("fill", "lightgrey")   
        .attr("height", 600)    
        .attr("width", 800);

Answer 1

你有几个问题：

剪辑路径必须指向clipPath element，而不是圆圈
url(ellipse-clip)不正确，应为url(#ellipse-clip)

D3.js：圆形剪切路径不起作用？

1 个答案: