Imagens com aspecto de medida diferentes não se ajustam se o tamanho do elemento usado, note que ambas imagens abaixo só funcionaram porque o aspecto é o mesmo das medidas que passou no elemento rect
.
Se a medida fosse um pouco diferente iriam aparecer espaços em branco em cima e baixo, ou esquerda e direita (dependendo da diferença de proporção).
Você pode remover o aspecto da tag <image>
, para conseguir isso use o atributo preserveAspectRatio="none"
, assim por exemplo:
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 600 600"
width="600"
height="600"
id="{{ pillar }}"
>
<defs>
<pattern id="imgPillar01" x="0" y="0" width="1" height="1">
<image width="100%" xlink:href="https://i.sstatic.net/KKm5N.jpg" preserveAspectRatio="none" />
</pattern>
<pattern id="imgPillar02" x="0" y="0" width="1" height="1">
<image width="300" height="300" xlink:href="https://i.sstatic.net/KKm5N.jpg" preserveAspectRatio="none" />
</pattern>
<pattern id="imgPillar03" x="0" y="0" width="1" height="1">
<image width="300" height="300" xlink:href="https://i.sstatic.net/KKm5N.jpg" preserveAspectRatio="none" />
</pattern>
</defs>
<rect width="600" height="300" fill="url(#imgPillar01)"></rect>
<rect x="300" y="300" width="300" height="300" fill="url(#imgPillar02)"></rect>
<rect x="-0.22" y="300" width="300" height="300" fill="url(#imgPillar03)"></rect>
</svg>
O problema disto é que ele vai esticar a imagem se a largura e a altura forem fixas ao mesmo tempo (no caso as suas imagens abaixo da imagem maior), então se você quiser manter a proporção da largura com a altura, use preserveAspectRatio="xMidYMid slice"
, assim:
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 600 600"
width="600"
height="600"
id="{{ pillar }}"
>
<defs>
<pattern id="imgPillar01" x="0" y="0" width="1" height="1">
<image width="100%" xlink:href="https://i.sstatic.net/KKm5N.jpg" preserveAspectRatio="xMidYMid slice" />
</pattern>
<pattern id="imgPillar02" x="0" y="0" width="1" height="1">
<image width="300" height="300" xlink:href="https://i.sstatic.net/KKm5N.jpg" preserveAspectRatio="xMidYMid slice" />
</pattern>
<pattern id="imgPillar03" x="0" y="0" width="1" height="1">
<image width="300" height="300" xlink:href="https://i.sstatic.net/KKm5N.jpg" preserveAspectRatio="xMidYMid slice" />
</pattern>
</defs>
<rect width="600" height="300" fill="url(#imgPillar01)"></rect>
<rect x="300" y="300" width="300" height="300" fill="url(#imgPillar02)"></rect>
<rect x="-0.22" y="300" width="300" height="300" fill="url(#imgPillar03)"></rect>
</svg>