是否有任何可能切割成可以隨d3移動的圖像（jquery）

Question

我正在創建一個氣泡圖，問題是我希望在氣泡內添加一些圖像。

我使用這個代碼：http://bl.ocks.org/mbostock/4062045

予更大的圓（20像素周圍半徑），我想有一個圖像作爲該圓的填充和黑色行程（圓圈）。

現在我所擁有的是一個過濾器，它內部有一個過濾圓的圖像。問題是圖像正確移動，但仍然是一個正方形。

我嘗試添加一個帶圓圈的內部，但是當我應用裁剪時，修剪後的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的代碼導致的，則使用帶有過濾器=「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

可以完成使用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。希望這可以幫助。

Answer 2

您可以使用feComposite原語和operator =「in」將圖像剪裁成濾鏡中的形狀。谷歌許多例子中的任何一個，或發佈你的過濾器代碼，我會爲你添加它。

更新：

好了，所以你的過濾器將無法工作，因爲過濾器只能容納過濾元。您可以通過引用SourceGraphic來使用過濾器中的形狀 - 它將引入過濾器引用的元素，或者使用feImage通過引用來拉入另一個形狀。後者在IE中有點bug，所以對於跨瀏覽器，我推薦前者。以下是執行此操作的過濾器。

請注意，有很多方法可以將剪輯和輪廓組合起來。這是通過使用「綠色屏幕」技術來實現的 - 我們使用紅色填充作爲剪輯，但是最後使用顏色矩陣將其除去。我實際上推薦使用白色填充和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>