svg-vdom
This is a util that parses SVG strings and uses DOM-like APIs to manipulate them.
Installation and use
Install from npm
npm install svg-vdom -D
Install from yarn
yarn add svg-vdom -D
Use
import { parse, NodeType } from 'svg-vdom';
parse(`<?xml version="1.0" encoding="UTF-8"?>
<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>square</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
<rect id="Rectangle-7" x="0" y="0" width="42" height="42"></rect>
</g>
</svg>`).then(vdom => {
console.log(vdom.childNodes.length); // 2
console.log(vdom.querySelector('#Page-1')); // g#Page-1
console.log(NodeType[vdom.nodeType]); // 'Document'
console.log(vdom.toString());
});Api
| Name | Description |
|---|---|
| parse | Parse the SVG string to generate virtual-dom |
| NodeType | Enum object of node type |
| ParentNode | The class of the container node |
| TextNode | The class of the text node |
| TagNode | The class of the label node |
| stringifySVG | Stringify virtual-dom |
| stringifyNode | Stringify a node |
| stringifyTag | Stringify a tag node |
| parseSelector | Parse the selector string |
| selectorUnitCombinator | CSS selector combo symbol enumeration object |
| attrModifier | CSS attribute selector equal sign enumeration object |
| matchSelectorGroups | Determine whether a node matches the CSS selector group |
| matchSelectors | Determine whether a node matches the CSS selector |
| matchSelector | Determine whether a node matches the CSS selector unit |