parametric-svg-patch

Update a parametric SVG element with new data. A low-level library.

 

<rect
  id="cool-rectangle"
  parametric:x="2 * a"
  parametric:y="b + 5"
/>

➕

const parse = require('parametric-svg-parse');
const patch = require('parametric-svg-patch');
const rectangle = document.querySelector('#cool-rectangle');
const ast = parse(rectangle);

patch(rectangle, ast, {
  a: 10,
  b: 20,
});

➔

<rect
  id="cool-rectangle"
  x="20"  parametric:x="2 * a"
  y="25"  parametric:y="b + 5"
/>

 

Installation

$ npm install parametric-svg-patch

 

Usage

_{JSIG SIGNATURE:}

patch(
  element: DOMElement,
  ast: ParametricSvgAst,
  variables: Object
) => void

The element will be updated in place with bindings from the ast using the variables you give us. The ast should generally come from the module parametric-svg-parse. You can also generate it yourself using parametric-svg-ast.

If a parametric attribute depends on a variable you don’t give us, we won’t update the attribute. For example, if you have a <rect parametric:x="a + 1" y="5" parametric:y="b + 1" /> and only give us {a: 10} as variables, the result will be <rect x="11" parametric:x="a + 1" y="5" parametric:y="b + 1" />.

 

License

MIT © Tomek Wiszniewski