3

Estou usando um svg, e dentro dele colocando uma imagem que recebo de uma variável pelo AngularJS. Até ai tudo bem, a imagem aparece normalmente, mas quero deixar ele com width 100%. Já tentei de tudo e não funciona. Alguém tem alguma ideia? A Primeira imagem, quero deixar com a largura do mesmo tamanho das outras de baixo

<svg ng-if="images[0] == 3" viewBox="0 0 600 600" id="{{ pillar }}">
    <defs>
      <pattern id="imgPillar01" x="0" y="0" width="1" height="1">
        <image width="600" height="300" xlink:href="" ng-href="{{ images[1] }}"/>
      </pattern>
      <pattern id="imgPillar02" x="0" y="0" width="1" height="1">
        <image width="300" height="300" xlink:href="" ng-href="{{ images[2] }}"/>
      </pattern>
      <pattern id="imgPillar03" x="0" y="0" width="1" height="1">
        <image width="300" height="300" xlink:href="" ng-href="{{ images[3] }}"/>
      </pattern>
    </defs>
    <rect width="600" height="300" fill="url(#imgPillar01)" />
    <rect x="300" y="300" width="300" height="300" fill="url(#imgPillar02)" />
    <rect x="-0.22" y="300" width="300" height="300" fill="url(#imgPillar03)" />
  </svg>

1 Resposta 1

3

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .