score:1

Accepted answer

Try this:

...
.append("image")
.attr("xlink:href", imgUrl)
.attr("x", 0)
.attr("y", 0)
.attr("width", 1)
.attr("height", 1)
.attr('preserveAspectRatio', 'xMidYMid slice');

score:0

You can position and scale the image in the pattern using object viewport coordinates [0..1].

Note: xlink:href is deprecated, use href instead

The image is 768x512, that is 1.5:1. You then need to move the x coord of start drawing 0.25 to the left, so x=-0.25.

Using this method you can choose whatever part of the image you want to fill the pattern.

...
.append("image")
.attr("href", imgUrl)
.attr("x", -0.25)
.attr("y", 0)
.attr("width", 1.5)
.attr("height", 1);

Related Query