Getting Current Coordinates For A Morphing Svg With Javascript

I am attempting to take an svg path that is morphing in response to the user's mouse movements and expand it into a stable rectangle when the user clicks a button. The current proj

Solution 1:

In my opinion, - the best practice of mastering JS libraries for SVG animation is - understanding the basics of creating the simplest SVG figures and their manual animation. Let me show you, on a concrete example, one way how this can be done.

Create an animation of the morphing of a pentagon into a square.

To morph one figure into another, you need two patches with the same number of nodes. In our case, if a pentagon should have five nodes, then the patch of the square also has five. Draw the shapes in a vector editor, for example, Inkscape.

• Set the size of the document 400х400 px

• We set the horizontal and vertical guides that run through the center of the document and the anchor points. In the figure below, these are blue lines. On them we will navigate when dragging nodes.

• In the tool palette, select the polygons

• Set the cursor to the center of the document and draw a pentagon

• Select the menu: Contour / Ocontur object (Shift + Ctrl + C)
• We save the files in * .svg format, but the editor does not close
• From the entire code of the file, we need only one line with the attribute d = "m ..z"

<path d="m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z" />

• Return to Inkscape, select the tool - edit the contour nodes, and drag the nodes to make a square

  

• Again, save the file and copy the new values of the attribute d = "m .." The values we get are needed to substitute in the variable values = ".."

values="m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z;
         m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z"

A semicolon separates the path values for a square and a pentagon. With the animation, the path will change from one value to another.

Below is the code that implements the animation of a smooth transformation of one figure into another:

Start animation when clicking on svg

<svgid="svg2"width="400"height="400"viewBox="0 0 400 400"id="svg2"version="1.1"><gid="layer1"transform="translate(0,-652.36216)"style="fill:yellowgreen;stroke-width:3;stroke:dodgerblue"><pathd="m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z" ><animateattributeName="d"begin="svg2.click"dur="6s"fill="freeze"repeatCount="1"restart="whenNotActive"values=" m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z;
		           m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z" /></path></g></svg>

Where,

<animate attributeName="d" - animation command attribute 'd'

begin="svg2.click" - start animation when clicking on svg

dur="6s" - Animation duration 6 seconds

fill="freeze" - After the animation ends, the figure freezes in its final position

repeatCount="1" - Single repetition

restart="whenNotActive" - prohibit the animation from restarting until it finishes

More complex example of the same technique

Animation tooltip with notches at the arrow

• From an svg file made in Inkscape, copy the patch blank tooltip

<svgversion="1.1"viewBox="0 0 240 240"  ><pathd="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z"style="fill:#0391FD;stroke-linecap:round;stroke-linejoin:round;"/></svg>

• Change the shape of the workpiece tooltip by dragging the nodes

• Again copy the patch from the new svg file Inkscape

<svgid="svg1"version="1.1"viewBox="0 0 240 240"   ><pathd="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z"style="fill:#0391FD;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.4;stroke:#0391fd"/></svg>

• Just like in the first example, we make the animation an attribute of the patch d

body {
  background: url('http://badumka.ru/images/1523569_krasochnaya-priroda.jpg') no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.bdiv {
  display: table;
}

.container {
  position: relative;
  width: 500px;
  margin: 0 auto;
}  

<divclass="bdiv"><divclass="container"><svgid="svg1"version="1.1"xmlns:svg="http://www.w3.org/2000/svg"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 240 240"><gtransform="scale(0.8)"><pathd="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z"style="fill:dodgerblue;stroke-linecap:round;stroke-linejoin:round; fill-opacity:0.5"><animateid="an_path"attributeName="d"values="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;
      m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z; m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z  "begin="svg1.click"dur="8s"repeatCount="1"fill="freeze"></animate></path><textx="30"y="50"font-size="18"fill="white">click me </text></g></svg></div></div>

Animating the attribute "d" of the patch is a very powerful and efficient tool that allows you to implement a variety of transformations.

After mastering and understanding the manual method of animating SVG shapes, it is much easier to be utilized libraries JS.