w0rm/gulp-svgstore

Update README to propose automatic fix for `clipPath` issues

stowball opened this issue · 1 comments

I've just ran in to the clipPath issue which is mentioned in the README, so came up with a solution using cheerio which I feel would be good to add to the docs.

The following caters for multiple or no <defs> and <clipPath>s existing within <defs> or not, and combines them all in to 1 <defs> if necessary

.pipe(cheerio({
  run: function ($) {
    const defs = Array.from($('defs').map((i, el) => {
      const html = $(el).html();

      $(el).remove();

      return html;
    })).join('');
    
    const clipPaths = Array.from($('clipPath').map((i, el) => {
        const html = $.html(el);

        $(el).remove();

        return html;
    })).join('');
    
    if (defs.length || clipPaths.length) {
      $('svg').prepend(`<defs>${defs}${clipPaths}</defs>`);
    }
  },
  parserOptions: { xmlMode: true }
}))
w0rm commented

@stowball thanks! I think this would grow the readme too much, I updated the readme to link to this solution.