правильно выровнять svg polygon

Question

Итак, я пытался создать страницу портфолио, и я хочу использовать пользовательские фигуры. Поэтому вместо использования divs я использую форму polygon svg для получения фона img. Обратите внимание, что это первый раз, когда я занимаюсь svg, и я пытаюсь исправить его целый день.

Таким образом, проблема заключается в том, что граница слева и справа и сверху справа вырезает край моего шпа. Я попытался уменьшить ширину/высоту многоугольника, но он не работает должным образом. Он остается малым или вырезать даже больше, что делает его форма swuare ..

Это мой HTML-код, а также рабочий jsfiddle: http://jsfiddle.net/1rmd2otz/1/

<div class="sv-img"> 
    <svg class="svg" viewBox="0 0 910 500" > 
     <defs> 
      <pattern id="img1" patternUnits="userSpaceOnUse" width="900" height="490"> 
       <image xlink:href="img/service/website.jpg" x="0" y="0" width="890" height="480" /> 
      </pattern> 
     </defs> 
     <polygon points="96.729,27.124 0,490.109 867.032,420.878 900,0" fill="url(#img1)"/> 
    </svg> 
</div> 

Итак, кто может мне помочь?

Answer 1

Похоже, ваша проблема находится в точках полигона. Изменение ...

<polygon points="96.729,27.124 0,490.109 867.032,420.878 900,0" fill="url(#img1)"/> 

К ...

<polygon points="96.729,27.124 10,470.109 867.032,420.878 890,10" fill="url(#img1)"/> 

jsFiddle: http://jsfiddle.net/rfornal/1rmd2otz/3/

Это не может быть именно то, что вы хотите, но вы должны получить движется в правильном направлении. Вы МОЖЕТЕ сделать это с другой стороны и изменить значения SVG viewBox (расширить их).

Answer 2

Хорошо, я вижу пару вещей не так. Начнем с первого и проработаем через него.

Для начала ваш многоугольник 900x490, но вы указываете рисунок с размерами 890x480. Таким образом, это часть причины, по которой вы получаете «обрезанные» углы - ваш рисунок не расширяет всю ширину и высоту многоугольника.

Если мы исправим это, мы почти доберемся. Я добавил красную линию, чтобы более четко показать контур многоугольника.

Here's a demo.

Это еще не совсем верно. Есть все еще небольшие пробелы сверху и снизу. Причина этого заключается в том, что соотношение сторон вашего полигона/рисунка (900/490 ~ = 1,84) не совпадает с соотношением сторон вашего изображения (570/300 = 1.9). То, что делает рендеринг, - это масштабирование изображения 500x370, чтобы оно соответствовало размерам, указанным для вашего <image>, сохраняя при этом одинаковое соотношение сторон. В результате получается изображение размером 900 x 473,7 (473,7 = 900/1,9), центрированное по вертикали в вашем шаблоне 900x490. Это оставляет примерно 6 пикселей сверху и снизу.

Есть несколько способов исправить это. Очевидно, можно было бы изменить либо изображение, либо многоугольник, чтобы точно соответствовали его пропорциям.

Другой способ исправить это - изменить способ масштабирования изображения. По умолчанию изображение масштабируется, чтобы соответствовать заданной ширине и высоте, но не выходит за пределы этих измерений. Это означает, что иногда разрыв будет оставлен - как мы видим. Вы можете изменить его на другой режим масштабирования, который сообщает ему масштабирование, чтобы он соответствовал максимальному размеру, не оставляя пробелов. Вы делаете это, установив preserveAspectRatio="xMidYMid slice" на изображение.

<image xlink:href="[...snip...]" 
     x="0" y="0" width="900" height="490" preserveAspectRatio="xMidYMid slice"/> 

Here's a demo of that.

Вы можете видеть, что полигон полностью заполнен в настоящее время.

You can read more about preserveAspectRatio here.