Accepted answer

I'm not exactly sure why this works to be honest but when I changed the width and height of the pattern element and removed the patternUnits attribute, I was able to achieve the desired look:

  .attr('id', 'pic1')
  .attr('width', 1)
  .attr('height', 1)
  .attr('xlink:href', imgPath)
  .attr("width", 300)
  .attr("height", 300)
  .attr("transform", "rotate(00 150 150)")
  .attr("x", 0)
  .attr("y", 0);

I don't understand it completely but it has something to do with the coordinate system and the way in which the pattern scales to the object you're applying it to. The width and height aren't defining the size of the image as you might initially think, but the way in which the pattern will map to the new coordinate system of the donut. A width and height of 1 indicates that the pattern will just scale to the width and height of the donut.

Getting my info from here and admittedly not fully grasping it all yet but hopefully this will help:

Related Query

More Query from same tag