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基元和运算符=＆＃34;在＆＃34;中将图像剪切为滤镜内的形状。 Google中的任何一个示例，或发布您的过滤器代码，我都会为您添加。

更新

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

请注意，有很多方法可以合并剪辑和轮廓。这是通过使用＆＃34;绿屏＆＃34;技术 - 我们使用红色填充为剪辑，但然后使用颜色矩阵摆脱最终。我实际上建议使用白色填充和feBlend - 这样可以获得更好的视觉效果（恕我直言）。结果如下。

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

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

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）

2 个答案: