使用D3用背景图像填充svg

Question

I've posted a few other questions about this and have now abandoned my previous bootstrap framework for a solid svg strip using D3.

My goal is to have 3 triangles masking 3 images, that are clickable to page anchor links only inside the triangles. (Ideally I want to add a transition-to-circle effect on hover also, but I'm not worried about that now).

I have the jsfiddle below so far, but can't manage to un-rotate the images inside the triangle, or make the background be just one single image instead of the cover like it is now. I tried CSS background-image also, but with no success.

Here's a piece of my d3.js code, and a full jsfiddle below.

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/

Thank you for any time or help you can give to fix those images!

Answer 1

If you want the patterns to fill the triangle, make them the same size as the triangle. Your pattern was 100x100, but your triangles were much bigger than that. So the pattern was repeating.

If you don't want your pattern fill to be rotated, don't rotate your triangle.

If you don't want the images in your pattern squashed, define your pattern so it has the same aspect ratio. Your images are rectangular, but you were squishing them into a square shape (100x100).

Here's a fixed demo sample below. 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)");