Mit SVG ein Sechseck animieren und drehen

Question

Aug 23, 2016, 10:31 PM

Mit SVG ein Sechseck animieren und drehen

Ich habe SVGs noch nie wirklich benutzt, aber ich habe jetzt einige Tutorials darüber gelesen und ein paar Sachen getestet. Ich lerne, wie man Formen wie ein Sechseck macht, aber jetzt muss es auf der vertikalen Achse nach unten kippen und sich vergrößern, während der untere Teil des nicht gekippten Sechsecks als der obere Teil des neuen gekippten Sechsecks beibehalten wird.

Mein Code ist hier:

<html>
  <style>    
    #test:hover {
      fill: yellow;
    }
  </style>
  <body>
    <div class="viewBox">
      <h1>SVG Testing</h1>
      <svg height="900" width="400" version="1.1" xmlns="http://www.w3.org/2000/svg" style="background-color: gray;">
        <path d="M0 86.60254037844386L50 0L150 0L200 86.60254037844386L150 173.20508075688772L50 173.20508075688772Z" fill="green" id="test"></path>
      </svg>
    </div>
  </body>
</html>

Was sind meine nächsten Schritte?

Verwende ich dazu eine Bibliothek?