SVG - 用图像和地图填充多边形

Question

我试图将图像放入svg多边形形状，但这并不能很好地工作。

我不明白为什么图像不能填满所有的SVG形状。

任何人都可以帮助我吗？我还需要放一个谷歌地图图片，我该怎么办？

我的代码：

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

感谢＆＃39; S

Answer 1

图像和形状具有不同的纵横比。默认情况下，会保留图像的宽高比。如下所示，preserveAspectRatio属性可以覆盖它。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;