2
イメージをsvgポリゴンシェイプに入れようとしていますが、これはうまくいきません。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>
感謝の
OKああ、意味をなします。どうもありがとう。あなたは地図でそれをする方法を知っていますか? @Robert Longson – user3242861
これは役に立ちますか?他の質問をする必要がない場合は、http://stackoverflow.com/questions/1142821/google-maps-image –
もう一度質問を作成します。 画像の幅と高さを適切に調整するにはどうすればよいですか? @ロバートロンソン – user3242861