有没有可能将可以用 d3 (jquery) 移动的图像切割成一个形状

Question

我正在创建一个气泡图，问题是我希望在气泡内添加一些图像。

我正在使用此代码：http://bl.ocks.org/mbostock/4062045

我的圆圈更大（半径约为 20 像素），我想要一个图像作为圆圈的填充和黑色笔触（圆圈）。

现在我有一个过滤器，里面有一个过滤圆圈的 feImage。问题是图像移动正确但仍然是正方形。

我尝试在里面添加一个带有圆圈的 a，但是当我应用剪辑时，剪辑的 svg 区域是固定的（我可以看到图像在它后面移动）。

我该如何解决这个问题？

<filter id="Myriel" x="0%" y="0%" width="100%" height="100%"> <feImage xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/vangogh.jpg"></feImage> </filter>

这是 d3 代码的结果，然后与 filter="url(#Myriel)" 一起使用，例如

现在我正在使用它，但无法正常工作：

<filter id="Myriel" x="0%" y="0%" width="100%" height="100%">
    <feImage xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/vangogh.jpg" result="img1">
    </feImage>
    <circle r="15" result="circ"></circle>
    <feComposite operator="atop" in="img1" in2="circ"></feComposite>
</filter>

Answer 1

您可以使用 feComposite 原语和 operator="in" 将图像裁剪为过滤器中的形状。谷歌许多示例中的任何一个，或发布您的过滤器代码，我会为您添加它。

更新：

好的，因此您的过滤器将无法工作，因为过滤器只能包含过滤器原语。您可以通过引用 SourceGraphic 在过滤器中使用形状 - 这将拉入引用过滤器的元素，或者使用 feImage 通过引用拉入另一个形状。后者在 IE 中有些问题，所以对于跨浏览器，我推荐前者。以下是执行此操作的过滤器。

请注意，有很多方法可以将剪辑和大纲结合起来。这是通过使用“绿屏”技术来实现的——我们为剪辑使用红色填充，但随后使用颜色矩阵将其去掉以进行最终处理。我实际上建议使用白色填充和 feBlend - 这会产生更好的视觉外观（恕我直言）。以下两个结果。

另请注意，我删除了您过滤器上的尺寸。浏览器通常不会在其过滤器尺寸计算中包含笔划宽度，因此如果您使用 0%、100%，则会剪切笔划。

<svg width="600px" height="800px">
  <defs>
<filter id="Myriel">
    <feImage xlink:href="http://i.imgur.com/KPVrxlQ.png" width="500" height="500" result="img1"/>
    <feComposite operator="in" in="img1" in2="SourceGraphic" result="clip"/>
    <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0   0 1 0 0 0  0 0 0 0 0  -1 0 0 1 0" result="outline"/>
    <feComposite operator="over" in2="clip" in="outline"/>
</filter>
  </defs>
  <circle filter="url(#Myriel)" cx="200" cy="200" r="150" fill="red" stroke="blue" stroke-width="4" />
</svg>

<svg width="600px" height="800px">
  <defs>
<filter id="Myriel">
    <feImage xlink:href="http://i.imgur.com/KPVrxlQ.png" width="500" height="500" result="img1"/>
    <feComposite operator="in" in="img1" in2="SourceGraphic" result="clip"/>
    <feBlend mode="multiply" in="SourceGraphic" in2="clip"/>
</filter>
  </defs>
  <circle filter="url(#Myriel)" cx="200" cy="200" r="150" fill="white" stroke="black" stroke-width="4" />
</svg>

Answer 2

您可以使用 svg clippath 完成相同的任务。

node.append("circle")
    .attr("r", function(d) {
        return d.radius + 2;
    })
    .style("fill", function(d) {
        return color(1 / d.rating);
    });

node.append("clipPath")
    .attr('id', function(d, i) {
        return "clip" + i
    })
    .append("circle")
    .attr("class", "clip-path")
    .attr("r", function(d) {
        return d.radius;
    })
    .style("fill", function(d) {
        return color(1 / d.rating);
    });

node.append("svg:image")
    .attr("class", "circle")
    .attr("xlink:href", "https://c1.staticflickr.com/9/8086/8466271529_dc5c0a958f.jpg")
    .attr("clip-path", function(d, i) {
        return "url(#clip" + i + ")"
    })
    .attr("x", function(d) {
        return -d.radius;
    })
    .attr("y", function(d) {
        return -d.radius;
    })
    .attr("width", function(d) {
        return d.radius * 2;
    })
    .attr("height", function(d) {
        return d.radius * 2;
    });

我也为此做了一个JSFiddle。希望这会有所帮助。