Wie man eine SVG Sechseckform dreht?

Ich möchte nur einige Änderungen in meiner hexagonalen Form machen, ich brauche Bild so wie es ist, nur Form muss rotieren. Oder erzähl mir irgendeinen anderen Weg, dies zu ermöglichen.Wie man eine SVG Sechseckform dreht?

Hinweis: Ich brauche Bild so wie es ist, nur Form muss gedreht werden.

Aus dieser Form:

Zu dieser Form:

Danke,

Dies ist der Code

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

Quelle

2016-06-21 Vishal Panara

ein Drehen patternTransform das Muster hinzufügen oder drehen, um das Bild zu transformieren. –

Ändern Sie die Koordinaten polygon.

25,8 75,8 100,50 75,92 25,92 0,50 Diese Koordinaten erzeugt den erforderlichen Effekt.

Polygon ist eine geschlossene Form, die durch Verbinden der angegebenen Punkte erstellt wird.

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

Quelle

2016-06-21 07:17:30 Pugazh

können Sie die CSS innerhalb der Svg einfügen, damit es richtig funktioniert? –

Ich brauche Bild so wie es ist, nur Form muss rotieren. Tut mir leid, es vorher nicht zu erwähnen. –

Das erreichen Sie, indem Sie einfach die Polygonkoordinaten ändern. Überprüfen Sie die aktualisierte Antwort – Pugazh

-1

Fügen Sie diese in Ihrem CSS.

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

Quelle

2016-06-21 07:10:41 Arthur

Das Anwenden von 'transform' auf' # hex' funktioniert nicht, da das Bild nicht eingeschlossen ist. – Pugazh

-1

bitte diese verwenden. Es ist wichtig, das SVG-Attribut Viewbox Größe zu reduzieren: 0 0 100 100 während wir die Svg drehen.

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

Quelle

2016-06-21 07:22:41 iyyappan

überprüfen Sie this Plotter, um eine Lösung zu sehen.

gedreht I und I das Polygon rotiert, um das Bild von Minusgraden

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

Quelle

2016-06-21 08:28:54

Drehen der Form in eine Richtung und das Bild in die entgegengesetzte Richtung zu kompensieren.

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

Quelle

2016-06-21 08:32:00

Wie man eine SVG Sechseckform dreht?

Antwort

Verwandte Themen