Bild, um eine polygonale SVG-Form zu füllen

Question

Ich weiß, dass dieses Thema schon vorher gepostet wurde, aber bitte lesen Sie vor dem Markieren duplizieren.
Dies ist eine 2-teilige Frage.

Ich versuche, eine hexagonale SVG Form mit einem Bild zu füllen. Was ich will, ist, dass das Bild den hexagonalen Bereich vollständig bedeckt, ob es sich dehnen oder komprimieren muss, um dies zu tun. Bis jetzt konnte ich dies nur mit einem Bild mit fester Breite erreichen, und das auch mit einer Art Polsterung an den Seiten.

Ich habe nach anderen Fragen gesucht, aber erstens sind sie keine Sechsecke, zweitens hilft der darin enthaltene Code nicht, das Sechseck vollständig zu füllen. Hier ist mein Code und Schnappschuss.

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

Der zweite Teil ist, dass ich das Sechseck ansprechbar sein soll. Wie kann ich es reaktionsfähig machen, so dass es sich je nach Browserfenster ändert?

Dank

Answer 1

Zunächst einmal entfernen Höhe, Breite und x-Attribut von Image-Tag. Setze 100% Höhe und Breite in pattern und patternContentUnits = "objectBoundingBox".

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