CODEWITHSUNDEEP
javascripthtmlcssd3.jssvg
singmotor
singmotor

Reputation: 4180

SVG path drawing and filling with image

I need a little bit of help understanding/editing some svg paths. I was assisted in drawing three identical triangles (with images inside) and I want to change the first two triangles to one contiguous parallelogram. I have played with the numbers a ton and finally got the shape I want, but the image always repeats at a line partway into the middle of the shape drawn by the path. I changed the aspect ratio of the image a bunch but to no avail. Can anyone tell me what I'm doing wrong? Here is an example jsFiddle and my code.

I want what's there, but need the parallelogram to be the same height as the middle triangle (thereby covering it completely), and I need it to not have the image repeat. Any explanation of how these different .attr are affecting things would be greatly helpful from an education perspective.

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://francomasoma.com/wp-content/uploads/2016/05/FullSizeRender_7-560x483.jpg')
    .attr("width", 115.5)
    .attr("height", 100)
    .attr("x", 0)
    .attr("y", 0);


  defs.append('pattern')
    .attr('id', 'pic2')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 115.5)
    .attr('height', 100)
   .append('svg:image')
    .attr('xlink:href', 'http://wire.kapitall.com/wp-content/image-import/92277513-560x483.jpg')
    .attr("width", 115.5)
    .attr("height", 100)
    .attr("x", 0)
    .attr("y", 0);


  defs.append('pattern')
    .attr('id', 'pic3')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 115.5)
    .attr('height', 100)
    .append('svg:image')
    .attr('xlink:href', 'http://gallery.ksotov.co.uk/main.php?g2_view=core.DownloadItem&g2_itemId=13225&g2_serialNumber=1')
    .attr("width", 115.5)
    .attr("height", 100)
    .attr("x", 0)
    .attr("y", 0);



svg.append("a")
    .append('path')
    .attr("d", "M 0,0, 57.7,-100, 115.5,0z")
    .attr("transform", "translate(135.5, 100)")
    .attr("fill", "url(#pic1)");

svg.append("a")
    .append('path')
    .attr("d", "M 57.7,0, 0,-100, 115.5,-100z")
    .attr("transform", "translate(67.7, 100)")
    .attr("fill", "url(#pic2)");

svg.append("a")
    .append('path')
    .attr("d", "M 0,0, 57.7,-100, 183,-100, 125.5,0")
    .attr("transform", "translate(0, 100)")
    .attr("fill", "url(#pic3)");

Upvotes: 1

Views: 494

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

One way is simply to scale the image using patternTransform. I've also adjusted the height to ensure it is placed correctly.

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://francomasoma.com/wp-content/uploads/2016/05/FullSizeRender_7-560x483.jpg')
    .attr("width", 115.5)
    .attr("height", 100)
    .attr("x", 0)
    .attr("y", 0);


  defs.append('pattern')
    .attr('id', 'pic2')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 115.5)
    .attr('height', 100)
   .append('svg:image')
    .attr('xlink:href', 'http://wire.kapitall.com/wp-content/image-import/92277513-560x483.jpg')
    .attr("width", 115.5)
    .attr("height", 100)
    .attr("x", 0)
    .attr("y", 0);


  defs.append('pattern')
    .attr('id', 'pic3')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 115.5)
    .attr('height', 75)
    .attr('patternTransform', "scale(2)")
    .append('svg:image')
    .attr('xlink:href', 'http://gallery.ksotov.co.uk/main.php?g2_view=core.DownloadItem&g2_itemId=13225&g2_serialNumber=1')
    .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)");

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

svg.append("a")
    .attr("xlink:href", "#testanchor")
    .append('path')
    .attr("d", "M 0,0, 57.7,-100, 183,-100, 125.5,0")
    .attr("transform", "translate(0, 100)")
    .attr("fill", "url(#pic3)");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="mydiv">
    </div>

Upvotes: 2

Related Questions