Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update README to propose automatic fix for clipPath issues #98

Closed
stowball opened this issue Apr 25, 2019 · 1 comment
Closed

Update README to propose automatic fix for clipPath issues #98

stowball opened this issue Apr 25, 2019 · 1 comment

Comments

@stowball
Copy link

stowball commented Apr 25, 2019

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
Copy link
Owner

w0rm commented May 1, 2020

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

@w0rm w0rm closed this as completed May 1, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants