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

Question

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

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

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

到目前为止，我拥有的是一个在 feImage 中过滤圆圈的过滤器。问题是图像移动正确但仍然是正方形。

我尝试在里面添加一个圆圈，但是当我应用剪裁时，剪裁的 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" 将图像裁剪成过滤器内的形状。 Google 许多示例中的任何一个，或者 post 您的过滤器代码，我会为您添加。

更新：

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

请注意，有很多方法可以将剪辑和大纲组合起来。这是通过使用 "green screen" 技术实现的——我们对剪辑使用红色填充，然后在最后使用颜色矩阵去除它。我实际上建议使用白色填充和 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。希望这有帮助。

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

Is there any possibility to cut to a shape an image that can be moved with d3 (jquery)

javascript

css

svg

d3.js

svg-filters