Accepted answer

Try this:

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


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.

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

Related Query