Как повернуть гексагональную форму SVG?

Я просто хочу внести некоторые изменения в свою гексагональную форму, мне нужно изображение как есть, только форма должна вращаться. Или скажите мне, как это сделать.Как повернуть гексагональную форму SVG?

Примечание: Мне нужно изображение как есть, только форма должна быть повернута.

Из этой формы:

Для этой формы:

Спасибо,

Это код

<html> 
 
    <head> 
 
    <title></title> 
 
    </head> 
 
    <style type="text/css"> 
 
svg{ 
 
    width:30%; 
 
    margin:0 auto; 
 
} 
 
#hex{ 
 
    stroke-width:1; 
 
    stroke: #2f1522; 
 
} 
 

 
</style> 
 
    <body> 
 
    <svg viewbox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100"> 
 
     <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-40" width="150" height="100" /> 
 
    </pattern> 
 
    </defs> 
 
    <polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)"/> 
 
</svg> 
 
    </body> 
 
</html>

источник

2016-06-21 Vishal Panara

Добавить поворота patternTransform в шаблон или преобразование поворота к изображению. –

Измените координаты polygon.

25,8 75,8 100,50 75,92 25,92 0,50 Эти координаты создают необходимый эффект.

Polygon - закрытая форма, созданная путем соединения указанных точек.

<html> 
 

 
<head> 
 
    <title></title> 
 
</head> 
 
<style type="text/css"> 
 
    svg { 
 
    width: 30%; 
 
    margin: 0 auto; 
 
    } 
 
    #hex { 
 
    stroke-width: 1; 
 
    stroke: #2f1522; 
 
    } 
 
</style> 
 

 
<body> 
 
    <svg viewbox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
     <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100"> 
 
     <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-40" width="150" height="100" /> 
 
     </pattern> 
 
    </defs> 
 
    <polygon id="hex" points="25 8 75 8 100 50 75 92 25 92 0 50" fill="url(#img)" /> 
 
    </svg> 
 
</body> 
 

 
</html>

источник

2016-06-21 07:17:30 Pugazh

вы можете вставить css внутри svg, чтобы он работал правильно? –

Мне нужно изображение как есть, только форма должна вращаться. Извините, что не упоминал об этом раньше. –

Вы можете добиться этого, просто изменив координаты многоугольника. Проверьте обновленный ответ – Pugazh

-1

Добавьте это в CSS.

#hex { 
    -ms-transform: rotate(90deg); /* IE 9 */ 
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ 
    transform: rotate(90deg); 
}

источник

2016-06-21 07:10:41 Arthur

Применение 'tranform' к' # hex' не будет работать, потому что оно не включает изображение. – Pugazh

-1

, пожалуйста, используйте это. Важно уменьшить атрибут svg Размер окна просмотра: 0 0 100 100 пока мы вращаем svg.

<style> 
#hex { 
    border: 10px solid #ff0000 !important; 
    stroke: #21776e; 
    stroke-width: 2; 
} 

svg { 
margin: 0 auto; 
text-align: center; 
transform: rotate(90deg); 
width: 30%; 
} 
</style> 
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" align="center"> 
     <defs> 
     <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100"> 
      <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-40" width="150" height="100"/> 
     </pattern> 
     </defs> 
     <polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)"/> 
    </svg>

источник

2016-06-21 07:22:41 iyyappan

проверка this plunker, чтобы увидеть решение.

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

<html> 

<head> 
    <title></title> 

<style type="text/css"> 
    svg { 
    width: 30%; 
    margin: 0 auto; 
    ; 
    } 
    #hex { 
    stroke-width: 1; 
    stroke: #2f1522; 
    } 
    .rotate {} 
</style> 
</head> 
<body> 
    <svg viewbox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
     <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100"> 
     <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-40" transform="rotate(-90 50 50)" width="150" height="100" /> 
     </pattern> 
    </defs> 
    <polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)" transform="rotate(90 50 50)"/> 
    </svg> 
</body> 

</html>

источник

2016-06-21 08:28:54

Поворот формы в одном направлении, и изображение в противоположном направлении.

<html> 
 
    <head> 
 
    <title></title> 
 
    </head> 
 
    <style type="text/css"> 
 
svg{ 
 
    width:30%; 
 
    margin:0 auto; 
 
} 
 
#hex{ 
 
    stroke-width:1; 
 
    stroke: #2f1522; 
 
} 
 

 
</style> 
 
    <body> 
 
    <svg viewbox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100"> 
 
     <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-40" width="150" height="100" transform="rotate(-90, 50, 50)"/> 
 
    </pattern> 
 
    </defs> 
 
    <polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)" transform="rotate(90, 100, 100)"/> 
 
</svg> 
 
    </body> 
 
</html>

источник

2016-06-21 08:32:00

Как повернуть гексагональную форму SVG?

ответ

Смежные вопросы