Skip to content

SVG transforms ​

SVG transforms: orders applied one after the other and changed later, and anchors across groups.

ExportWhat it does
AnchorOne of the 9 points of a box: its corners, the middles of its sides, its center.
applySvgTransformsApplies orders to an SVG element, in order, each on what the previous ones give: one transform per order is added at the end of its transform list.
clearSvgTransformsEmpties the transform list of an SVG element: it is drawn without any transform.
getSvgAnchorPointFinds an anchor of the box an SVG element takes on screen: a corner, the middle of a side or the center.
getSvgAnchorPointInFinds an anchor of an element as seen on screen, in the coordinates of another element, whatever groups lie between: the center of a hub for the setRotate of a needle drawn in another group.
svgFlipToAn order of applySvgTransforms that makes the element mirrored or not, as seen on screen, around one of its anchors: svgFlipTo(false) makes a mirrored text readable again.
svgPlaceOnAn order of applySvgTransforms that moves the element so that one of its anchors lands on an anchor of another element, as seen on screen, whatever groups each one is in.
svgRotateByAn order of applySvgTransforms that turns the element by an angle from its position before this order, clockwise on screen, around an anchor of itself or of another element: set(90) after set(3) gives 90° from the start, not 93°.
svgRotateToAn order of applySvgTransforms that turns the element to an absolute angle on screen, clockwise from upright, around an anchor of itself or of another element: svgRotateTo(0) straightens it.
svgScaleByAn order of applySvgTransforms that enlarges or shrinks the element in its own axes, around an anchor of its drawing, which gives the direction: with 'left', it grows to the right; with 'bottom', upwards.
SvgTransformOrderAn order of applySvgTransforms, created by svgRotateBy, svgRotateTo, svgFlipTo, svgScaleBy, svgTranslateBy or svgPlaceOn: keep it to change its values later with set.
svgTranslateByAn order of applySvgTransforms that moves the element along its own axes, in its own units: turned by 90°, "to the right" goes down on screen.

Generated from the JSDoc of the sources.