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

canvas.clipPath doesn't clip background in SVG #5415

Closed
jessemtcarlton opened this issue Nov 29, 2018 · 2 comments · Fixed by #5424
Closed

canvas.clipPath doesn't clip background in SVG #5415

jessemtcarlton opened this issue Nov 29, 2018 · 2 comments · Fixed by #5424

Comments

@jessemtcarlton
Copy link

Version

2.4.4

Test Case

https://jsfiddle.net/jester1983/Da7SP/3172/

Information about environment

chrome

Steps to reproduce

create clipPath, then canvas.toSVG()

Expected Behavior

canvas background is clipped

Actual Behavior

background is not clipped.

suggest reorder steps for toSVG:

toSVG: function(options, reviver) {
      options || (options = { });
      options.reviver = reviver;
      var markup = [];

      this._setSVGPreamble(markup, options);
      this._setSVGHeader(markup, options);

      this._setSVGBgOverlayColor(markup, 'backgroundColor');
      this._setSVGBgOverlayImage(markup, 'backgroundImage', reviver);
      if (this.clipPath) {
        markup.push('<g clip-path="url(#' + this.clipPath.clipPathId + ')" >\n');
      }
      this._setSVGObjects(markup, reviver);
      if (this.clipPath) {
        markup.push('</g>\n');
      }
      this._setSVGBgOverlayColor(markup, 'overlayColor');
      this._setSVGBgOverlayImage(markup, 'overlayImage', reviver);

      markup.push('</svg>');

      return markup.join('');
    },

should be

toSVG: function(options, reviver) {
      options || (options = { });
      options.reviver = reviver;
      var markup = [];

      this._setSVGPreamble(markup, options);
      this._setSVGHeader(markup, options);

     
      if (this.clipPath) {
        markup.push('<g clip-path="url(#' + this.clipPath.clipPathId + ')" >\n');
      }
 this._setSVGBgOverlayColor(markup, 'backgroundColor');
      this._setSVGBgOverlayImage(markup, 'backgroundImage', reviver);
      this._setSVGObjects(markup, reviver);
      if (this.clipPath) {
        markup.push('</g>\n');
      }
      this._setSVGBgOverlayColor(markup, 'overlayColor');
      this._setSVGBgOverlayImage(markup, 'overlayImage', reviver);

      markup.push('</svg>');

      return markup.join('');
    },

or include overlays, not sure if overlay images should be clipped, but background definitely should be.

@asturur
Copy link
Member

asturur commented Dec 8, 2018

thanks for the report, i ll fix this.

@asturur
Copy link
Member

asturur commented Dec 9, 2018

your solution is correct, i wonder if you want to open a pr, in that case i ll wait for the fix.
Otherwise i m fixing it today.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants