javascript - Using D3 to fill an svg with a background image - Stack Overflow

admin管理员组

文章数量:1357098

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', '')
    .attr("width", 100)
    .attr("height", 100)
    .attr("x", 0)
    .attr("y", -10);

svg.append("a")
    .attr("xlink:href", "")
    .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)");

/

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

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.")
    .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/5Ldzk5w6/2/

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

• javascript
• html
• css
• svg
• d3.js

Share Improve this question Follow asked Feb 10, 2015 at 22:38 singmotorsingmotor 4,1801313 gold badges5454 silver badges8282 bronze badges 3

• If you rotate the triangle, you will also rotate the fill. There is no way around that. – Paul LeBeau Commented Feb 11, 2015 at 2:00
• ugh. Why is this so difficult? Has no one before me ever tried to make triangles to mask images? The rotation isn't the only issue, the images also map weirdly. – singmotor Commented Feb 11, 2015 at 7:44
• I am not sure what you were expecting. You are filling a triangle with a pattern that is (approx) half the height of the triangle and are surprised that it repeats? Then rotate the triangle and you are surprised that the pattern rotates? :) – Paul LeBeau Commented Feb 11, 2015 at 11:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.")
    .append('path')
    .attr("d", "M 0,0, 57.7,-100, 115.5,0z")
    .attr("transform", "translate(135.5, 100)")
    .attr("fill", "url(#pic1)");

本文标签： javascriptUsing D3 to fill an svg with a background imageStack Overflow