使用D3來填充背景圖像的svg

Question

我已經發布了一些關於此問題的其他問題，現在已經放棄了我以前的引導程序框架，使用D3的固體svg條。

我的目標是讓3個三角形掩蓋3張圖片，這些圖片只能在三角形內部點擊錨鏈接。 （理想情況下，我想爲懸停添加一個過渡到圈的效果，但我現在不擔心這一點）。

到目前爲止，我已經有了jsfiddle，但無法設法取消旋轉三角形內的圖像，或者使背景只是一個單一的圖像，而不是像現在這樣的封面。我也試過CSS background-image，但沒有成功。

這是我的d3.js代碼片段，下面是一個完整的jsfiddle。

var svg = d3.select(".mydiv").append("svg").attr("width",width).attr("height",height); 

var defs= svg.append('defs') 

defs.append('pattern') 
    .attr('id', 'pic1') 
    .attr('patternUnits', 'userSpaceOnUse') 
    .attr('width', 100) 
    .attr('height', 100) 
    .append('svg:image') 
    .attr('xlink:href', 'http://placehold.it/1749x1510') 
    .attr("width", 100) 
    .attr("height", 100) 
    .attr("x", 0) 
    .attr("y", -10); 

svg.append("a") 
    .attr("xlink:href", "http://www.google.com") 
    .append('path') 
    .attr("overflow","hidden") 
    .attr("d", d3.svg.symbol().type("triangle-up").size(10000)) 
    .attr("transform", function(d) { return "translate(" + 300 + "," + 200 + ") rotate(0)"; }) 
    .attr("fill", "url(#pic1)"); 

http://jsfiddle.net/5Ldzk5w6/2/

謝謝你的任何時間或幫助，你可以給解決這些圖片！

Answer 1

如果您想讓圖案填充三角形，請將它們與三角形的大小相同。你的圖案是100x100，但你的三角形比這大得多。所以模式在重複。

如果您不想讓圖案填充旋轉，請不要旋轉您的三角形。

如果您不希望圖案中的圖像被壓扁，請定義您的圖案，使其具有相同的寬高比。你的圖像是矩形的，但是你將它們壓扁成方形（100x100）。

下面是一個固定的演示示例。 Complete fiddle here

var width = 800; 
var height = 200; 


var svg = d3.select(".mydiv").append("svg") 
          .attr("width",width) 
          .attr("height",height) 
          .attr("viewBox", "0 0 250 100"); 

var defs= svg.append('defs') 
defs.append('pattern') 
    .attr('id', 'pic1') 
    .attr('patternUnits', 'userSpaceOnUse') 
    .attr('width', 115.5) 
    .attr('height', 100) 
    .append('svg:image') 
    .attr('xlink:href', 'http://cammac7.github.io/img/portfolio/LRO.jpg') 
    .attr("width", 115.5) 
    .attr("height", 100) 
    .attr("x", 0) 
    .attr("y", 0); 


svg.append("a") 
    .attr("xlink:href", "http://www.google.com") 
    .append('path') 
    .attr("d", "M 0,0, 57.7,-100, 115.5,0z") 
    .attr("transform", "translate(135.5, 100)") 
    .attr("fill", "url(#pic1)");