D3-Decompose
d3-decompose takes SVG or CSS3 transform strings and converts them into usable values.
A use case for this project was manipulating the the rotation of a <text>
without changing the translation.
Installation
HTML
JS (Babel)
Node
const decompose =
Usage
The decompose
function takes a string input 'translate(100)'
and returns an object of the values.
; translate: 'translate(-200, 1)' scale: 'scale(1.5, 1.2)'
It can also be used to return the values in an array form instead of the default strings.
; translate: '-200' '1' scale: '1.5' '1.2'
HTML
// decompose available on the global d3 objectd3
Node/JS (Babel)
// decompose imported/required into project as function
d3-decompose allows you to manipulate transform strings on elements.
var svg = d3; // Create a rectangle with an initial transform svg data size: 5 ; // Create a new transform and use it, keeping the original translate transform svg ;
Contributors
- Alex Coulcher @moonthug