svg-visitor

visit svg element use visitor pattern

Install

npm install svg-visitor

Usage

import { svgVisitor } from 'svg-visitor';

const svgDom = document.getElementByTagName('svg')[0]

svgVisitor(svgDom, {
  rectVisitor: function (rectDom) {
    const fill = rectDom.getAttribute('fill')
    if (fill === '#f00') {
      rectDom.setAttribute('fill', "#0f0")
    }
  }
})

before

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="40" height="40" >
  <rect width="40" height="40" x="0" y="0" id="0" fill="#f00"></rect>
</svg>

after

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="40" height="40" >
  <rect width="40" height="40" x="0" y="0" id="0" fill="#0f0"></rect>
</svg>

API

import { svgVisitor } from 'svg-visitor';

const svgDom = document.getElementByTagName('svg')[0]

svgVisitor(svgDom, {
  // visit all svg element under svgDom
  visitor: function(dom){},
  // visit <rect>...</rect>
  rectVisitor: function (rectDom) {},
  // visit <circle>...</circle>
  circleVisitor: function (circleDom) {},
  ...
})

Test

npm run-script test