SVG - イメージとマップでポリゴンを塗りつぶす

Question

イメージをsvgポリゴンシェイプに入れようとしていますが、これはうまくいきません。

イメージがすべてのSVGシェイプを満たしていない理由はわかりません。

誰でも手伝ってもらえますか？代わりにGoogleマップの画像を置く必要があります。どうすればいいですか？

マイコード：

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

感謝の

Answer 1

画像と形状が異なるアスペクト比を有します。デフォルトでは、画像のアスペクト比は保持されます。 preserveAspectRatio属性は、これまでのようにこれをオーバーライドすることができます。

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