virtual-hyperscript-svg
create virtual-dom nodes for svg using hyperscript syntax
Last updated 5 years ago by substack .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install virtual-hyperscript-svg 
SYNC missed versions from official npm registry.

virtual-hyperscript-svg

create virtual-dom nodes for svg using hyperscript syntax

example

svg.js:

var h = require('virtual-hyperscript-svg');

module.exports = function () {
    return h('svg', { width: 400, height: 300 }, [
        h('circle', { fill: 'lime', cx: 100, cy: 250, r: 20 }),
        h('rect', { fill: 'red', x: 50, y: 50, width: 300, height: 100 })
    ]);
};

then you can use virtual-dom-stringify to render some html strings from node:

var str = require('virtual-dom-stringify');
var svg = require('./svg.js')();
console.log(str(svg));
$ node str.js
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300"><circle fill="lime" cx="100" cy="250" r="20"></circle><rect fill="red" x="50" y="50" width="300" height="100"></rect></svg>

or use use virtual-dom/create-element browser-side:

var createElement = require('virtual-dom/create-element');
var svg = require('./svg.js')();
document.body.appendChild(createElement(svg));

methods

var h = require('virtual-hyperscript-svg')

var tree = h(name, props={}, children)

Create a virtual-dom tree for a tag name/selector, some properties, and an array of children.

Implicitly, the svg namespace (http://www.w3.org/2000/svg) is used and all properties are treated as attributes.

install

With npm do:

npm install virtual-hyperscript-svg

license

MIT

Current Tags

  • 2.0.0                                ...           latest (5 years ago)

2 Versions

  • 2.0.0                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 1
Last Month 3
Dependencies (4)
Dev Dependencies (2)

Copyright 2014 - 2016 © taobao.org |