From af7682f78b67e93a6cbf0e0c4405b3b7e212b55c Mon Sep 17 00:00:00 2001 From: paldepind Date: Sun, 29 Nov 2015 10:38:21 +0100 Subject: [PATCH] Document svg support --- README.md | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index d4c4933..2439653 100644 --- a/README.md +++ b/README.md @@ -3,9 +3,6 @@ A virtual DOM library with focus on simplicity, modularity, powerful features and performance. -_Note:_ Snabbdom is mostly done. I'm currently only making minor tweaks. The -documentation however is still quite lagging. - [![Join the chat at https://gitter.im/paldepind/snabbdom](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/paldepind/snabbdom?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) ## Table of contents @@ -50,6 +47,8 @@ features listed below. * Patch function with a function signature equivelant to a reduce/scan function. Allows for easier integration with a FRP library. * Features in modules + * `h` function for easily creating virtual DOM nodes + * [SVG just _works with_ the `h` helper](#svg).m * Features for doing complex CSS animations. * Powerful event listener functionality * [Thunks](#thunks) to optimize the diff and patch process even further @@ -391,6 +390,22 @@ h('div', [ ## Helpers +### SVG + +SVG just works when using the `h` function for creating virtual +nodes. SVG elements are automatially created with the appropriate +namespaces. + +```javascript +var vnode = h('div', [ + h('svg', {attrs: {width: 100, height: 100}}, [ + h('circle', {attrs: {cx: 50, cy: 50, r: 40, stroke: 'green', 'stroke-width': 4, fill: 'yellow'}}) + ]) +]); +``` + +See also the [SVG example](./examples/svg). + ### Thunks The thunks function takes an id for identifying a thunk, a function that