Изображение, чтобы заполнить полигональную форму SVG

Question

Я знаю, что эта тема была опубликована ранее, но, пожалуйста, прочитайте перед маркировкой дубликата.
Это вопрос 2 части.

Я пытаюсь заполнить форму hexagonal SVG с изображением. Я хочу, чтобы изображение полностью покрывало гексагональную область, нужно ли ее растягивать или сжимать, чтобы это сделать. До сих пор я смог выполнить это только с фиксированным изображением ширины, и это тоже имело какие-то дополнения по его сторонам.

Я искал это по другим вопросам, но во-первых, они не являются шестиугольниками, во-вторых, код, предоставленный в них, не помогает полностью заполнить шестиугольник. Вот мой код и моментальный снимок.

<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

В первую очередь высоты удалить, ширины и х атрибута из тега изображения. Установите 100% высоту и ширину в шаблоне и 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>