SVG - Fill polygon with image and map

Question

I'm trying to put an image in svg polygon shape but this doesn't work well.

I don't understand why the image doesn't fill all the SVG shape.

Can anyone help me? I also need that to put a google maps image instead, how can I do that?

My code:

#services
{
  position: relative;
  width: 100%;
  height: 600px;
}

#services .services-shape
{
  position: absolute;
  width: 100%;
  height: 500px;
}

#services .services-shape .svg-shape-top
{
  width: 100%;
  height: 100%;
  position: absolute;
}

#services .services-shape .svg-shape-top svg
{
  position: relative;
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke: red;
}

<section id="services">
  <div class="services-shape">
    <div class="svg-shape-top">
      <svg viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <pattern id="imgpattern" x="0" y="0" width="1" height="1">
            <image width="100%" height="100%"
                   xlink:href="https://a2ua.com/paisagem/paisagem-007.jpg"/>
          </pattern>
        </defs>
        <path fill="url(#imgpattern)" d="M 50 0, 100 25, 100 100, 50 100, 0 100, 0 25Z" />
      </svg>

    </div>
  </div>
</section>

Thank's

score 2 · Accepted Answer · answered Sep 28 '16 at 12:34

2

The image and the shape have different aspect ratios. By default the image's aspect ratio is preserved. The preserveAspectRatio attribute can override this as I've done below.

#services
{
  position: relative;
  width: 100%;
  height: 600px;
}

#services .services-shape
{
  position: absolute;
  width: 100%;
  height: 500px;
}

#services .services-shape .svg-shape-top
{
  width: 100%;
  height: 100%;
  position: absolute;
}

#services .services-shape .svg-shape-top svg
{
  position: relative;
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke: red;
}

<section id="services">
  <div class="services-shape">
    <div class="svg-shape-top">
      <svg viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <pattern id="imgpattern" x="0" y="0" width="1" height="1">
            <image width="100%" height="100%" preserveAspectRatio="none"
                   xlink:href="https://a2ua.com/paisagem/paisagem-007.jpg"/>
          </pattern>
        </defs>
        <path fill="url(#imgpattern)" d="M 50 0, 100 25, 100 100, 50 100, 0 100, 0 25Z" />
      </svg>

    </div>
  </div>
</section>

answered Sep 28 '16 at 12:34

Robert Longson

118,664
26
252
242

oh ok, make sense. Thank's a lot. Do you know how to do that with maps? @Robert Longson – user3242861 Sep 28 '16 at 12:44
Does this help? http://stackoverflow.com/questions/1142821/google-maps-image if not you might need to ask another question. – Robert Longson Sep 28 '16 at 12:51
Ok, i will create another question. How can i scale image well in width and height? @Robert Longson – user3242861 Sep 28 '16 at 14:54
scale in what way? It fills the shape so make the shape bigger? – Robert Longson Sep 28 '16 at 15:22
the image is stretched. – user3242861 Sep 28 '16 at 15:30
If you don't want the image to be stretched and the aspect ratio differs between the shape and the image, what do you want to happen? – Robert Longson Sep 28 '16 at 16:14

SVG - Fill polygon with image and map

1 Answers1