svg-vdom

This is a util that parses SVG strings and uses DOM-like APIs to manipulate them.

中文版 | Change Logs

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