svg-vdom
TypeScript icon, indicating that this package has built-in type declarations

1.0.12 • Public • Published

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

Package Sidebar

Install

npm i svg-vdom

Weekly Downloads

43

Version

1.0.12

License

MIT

Unpacked Size

179 kB

Total Files

72

Last publish

Collaborators

  • benboba_cn