Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

MorphSVGPlugin.convertToPath()

MorphSVGPlugin.convertToPath( shape:* ) : Array

Converts SVG shapes like <circle>, <rect>, <ellipse>, or <line> into <path>

Parameters

shape: *

element or selector string

Returns : Array

returns an Array of all <path> elements that were created.

Details

Technically it’s only feasible to morph <path> elements or <polyline>/<polygon> elements, but there are plenty of times you will want to morph a <circle> or <rect> or <ellipse> or <line>; This method makes that possible by converting those basic shapes into <path> elements.

MorphSVGPlugin.convertToPath("#elementID");


You can pass in an element or selector text, so you could also have it convert ALL of those elements with one line:

MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");


This literally swaps in a <path> for each one directly in the DOM, and it should look absolutely identical. It'll keep the attributes like "id", etc. intact so that the conversion, you should be able to target the elements just as you would before.

//An svg <rect> Like this:
<rect id="endShape" width="100" height="100" fill="red"/>
//becomes
<path id="endShape" fill="red" d="M100,0 v100 h-100 v-100 h100z"></path>

Why not automatically do the conversion? Because that's a bit too intrusive and could cause problems. For example, if you had event listeners applied to the original element(s) or references in your own code to those elements. We feel it's best to make sure the developer is aware of and specifically requests this conversion rather than doing it automatically.

Notes

  • If you define an "rx" or "ry" attribute on a <rect> element, make sure you define both (MorphSVGPlugin will default to a value of 0 whereas some browsers default to copying the one that was defined)

Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.
×