Merge pull request #287 from caesarsol/fix-svg-classname-docs

Update and improve docs section "Using Classes in SVG Elements"
pull/351/head
Simon Friis Vindum 7 years ago committed by GitHub
commit 2271b7bdf1

@ -514,22 +514,28 @@ var vnode = h('div', [
See also the [SVG example](./examples/svg) and the [SVG Carousel example](./examples/carousel-svg/).
#### Using Classes
Due to a bug in certain browsers like IE 11 and below and UC Browser, SVG Objects in these browsers do not support classlist property. Hence, the classes module (which uses classlist property internally) will not work for these browsers.
#### Using Classes in SVG Elements
Also, using snabbdom/h to create an element by passing a className along with the element type will not work as className property is read-only for SVG elements.
Certain browsers (like IE <=11) [do not support `classList` property in SVG elements](http://caniuse.com/#feat=classlist).
Hence, the _class_ module (which uses `classList` property internally) will not work for these browsers.
You can add classes to SVG elements for both of these cases by using the attributes module as shown below:-
```javascript
h('text', {
attrs: {
x: xPos,
y: yPos,
dy: "5",
class: 'text_class'
}},
text
);
The classes in selectors for SVG elements work fine from version 0.6.7.
You can add dynamic classes to SVG elements for these cases by using the _attributes_ module and an Array as shown below:
```js
h('svg', [
h('text.underline', { // 'underline' is a selector class, remain unchanged between renders.
attrs: {
// 'active' and 'red' are dynamic classes, they can change between renders
// so we need to put them in the class attribute.
// (Normally we'd use the classModule, but it doesn't work inside SVG)
class: [isActive && "active", isColored && "red"].filter(Boolean).join(" ")
}
},
'Hello World'
)
])
```
### Thunks
@ -697,4 +703,3 @@ Here are some approaches to building applications with Snabbdom.
Be sure to share it if you're building an application in another way
using Snabbdom.

Loading…
Cancel
Save