使用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)");