多角形SVG形状を塗り潰す画像

Question

このトピックは前に投稿されていますが、重複していることを示す前に読んでください。
これは2つの部分からなる質問です。

六角形のSVGの形を画像で塗りつぶしています。私が望むのは、イメージが六角形の領域を完全に覆うことです。そうするためには、それを伸ばしたり圧縮したりする必要があります。これまでは固定幅の画像でしかこれを達成できませんでした。

これは他の質問で検索しましたが、まずは六角形ではありません。第2に、六角形を完全に埋めるのに役立たないコードです。ここに私のコードとスナップショットがあります。

<a href="/bhive/business/index/8"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <svg style="width:117px;height:97px;" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <defs> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <pattern id="img8" height="100" width="100" patternUnits="userSpaceOnUse"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <image preserverAspectRatio="none" height="100%" width="200%" x="-25" xlink:href="images/my-store.gif"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </pattern> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </defs> 
 
                <polygon style="stroke: #999DA3;" fill="url(#img8)" points="50 1 95 25 95 75 50 99 5 75 5 25"> 
 
                </svg> 
 
                
 
               </a>

第二部では、私はこの六角が応答するようにしたいということ、です。ブラウザのウィンドウに合わせてサイズを変更するなど、どのように反応させることができますか？

ありがとう

Answer 1

まず、画像タグから高さ、幅、およびx属性を削除します。 patternとpatternContentUnits = "objectBoundingBox"に100％の高さと幅を設定します。

<svg> 
 
    <defs> 
 
     <pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox"> 
 
      <image height="1" width="1" preserveAspectRatio="none" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Gl%C3%BChwendel_brennt_durch.jpg/399px-Gl%C3%BChwendel_brennt_durch.jpg" /> 
 
     </pattern> 
 
    </defs> 
 

 
    <polygon style="stroke: #999DA3;" fill="url(#pattern1)" points="50 1 95 25 95 75 50 99 5 75 5 25"/> 
 
</svg>