Image within an SVG

Question

Image within an SVG

Navigation

#1 by (3 votes)

3

I'm using a svg, and inside it placing an image I get from a variable by AngularJS. So far so good, the image appears normally, but I want to leave it with 100% width. I've tried everything and it does not work. Does anyone have any ideas?

<svgng-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>

angularjs css svg

asked by anonymous 14.01.2017 / 13:16

1 answer

Similarity of elements in different vectors How to skip the line in writing the files?

score 3 · Accepted Answer

Images with different aspect of measurement do not adjust if the size of the element used, note that both images below worked only because the aspect is the same of the measurements that passed in element rect .

If the measure were a little different, white space would appear on top and bottom, or left and right (depending on the difference in proportion).

You can remove the appearance of the <image> tag, to achieve this use the preserveAspectRatio="none" attribute, for example:

<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.stack.imgur.com/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.stack.imgur.com/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.stack.imgur.com/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>

The problem with this is that it will stretch the image if the width and height are fixed at the same time (in this case your images below the larger image), so if you want to keep the width to height ratio, use preserveAspectRatio="xMidYMid slice" , like this:

<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.stack.imgur.com/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.stack.imgur.com/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.stack.imgur.com/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>