score:4

Accepted answer

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

Related Query

More Query from same tag