{"action":"created","issue":{"url":"https://api.github.com/repos/fabricjs/fabric.js/issues/5415","repository_url":"https://api.github.com/repos/fabricjs/fabric.js","labels_url":"https://api.github.com/repos/fabricjs/fabric.js/issues/5415/labels{/name}","comments_url":"https://api.github.com/repos/fabricjs/fabric.js/issues/5415/comments","events_url":"https://api.github.com/repos/fabricjs/fabric.js/issues/5415/events","html_url":"https://github.com/fabricjs/fabric.js/issues/5415","id":385966191,"node_id":"MDU6SXNzdWUzODU5NjYxOTE=","number":5415,"title":"canvas.clipPath doesn't clip background in SVG","user":{"login":"jessemtcarlton","id":3532986,"node_id":"MDQ6VXNlcjM1MzI5ODY=","avatar_url":"https://avatars0.githubusercontent.com/u/3532986?v=4","gravatar_id":"","url":"https://api.github.com/users/jessemtcarlton","html_url":"https://github.com/jessemtcarlton","followers_url":"https://api.github.com/users/jessemtcarlton/followers","following_url":"https://api.github.com/users/jessemtcarlton/following{/other_user}","gists_url":"https://api.github.com/users/jessemtcarlton/gists{/gist_id}","starred_url":"https://api.github.com/users/jessemtcarlton/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jessemtcarlton/subscriptions","organizations_url":"https://api.github.com/users/jessemtcarlton/orgs","repos_url":"https://api.github.com/users/jessemtcarlton/repos","events_url":"https://api.github.com/users/jessemtcarlton/events{/privacy}","received_events_url":"https://api.github.com/users/jessemtcarlton/received_events","type":"User","site_admin":false},"labels":[{"id":86773,"node_id":"MDU6TGFiZWw4Njc3Mw==","url":"https://api.github.com/repos/fabricjs/fabric.js/labels/bug","name":"bug","color":"e10c02","default":true},{"id":1074654281,"node_id":"MDU6TGFiZWwxMDc0NjU0Mjgx","url":"https://api.github.com/repos/fabricjs/fabric.js/labels/svg_output","name":"svg_output","color":"54f7c3","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-11-29T23:06:46Z","updated_at":"2018-12-08T14:50:06Z","closed_at":null,"author_association":"NONE","body":"<!-- BUG TEMPLATE -->\r\n## Version\r\n2.4.4\r\n\r\n## Test Case\r\nhttps://jsfiddle.net/jester1983/Da7SP/3172/\r\n\r\n## Information about environment\r\nchrome\r\n\r\n## Steps to reproduce\r\ncreate clipPath, then canvas.toSVG()\r\n\r\n## Expected Behavior\r\ncanvas background is clipped\r\n\r\n## Actual Behavior\r\nbackground is not clipped.\r\n\r\n\r\nsuggest reorder steps for toSVG:\r\n\r\n\r\n```\r\ntoSVG: function(options, reviver) {\r\n      options || (options = { });\r\n      options.reviver = reviver;\r\n      var markup = [];\r\n\r\n      this._setSVGPreamble(markup, options);\r\n      this._setSVGHeader(markup, options);\r\n\r\n      this._setSVGBgOverlayColor(markup, 'backgroundColor');\r\n      this._setSVGBgOverlayImage(markup, 'backgroundImage', reviver);\r\n      if (this.clipPath) {\r\n        markup.push('<g clip-path=\"url(#' + this.clipPath.clipPathId + ')\" >\\n');\r\n      }\r\n      this._setSVGObjects(markup, reviver);\r\n      if (this.clipPath) {\r\n        markup.push('</g>\\n');\r\n      }\r\n      this._setSVGBgOverlayColor(markup, 'overlayColor');\r\n      this._setSVGBgOverlayImage(markup, 'overlayImage', reviver);\r\n\r\n      markup.push('</svg>');\r\n\r\n      return markup.join('');\r\n    },\r\n```\r\n should be \r\n```\r\ntoSVG: function(options, reviver) {\r\n      options || (options = { });\r\n      options.reviver = reviver;\r\n      var markup = [];\r\n\r\n      this._setSVGPreamble(markup, options);\r\n      this._setSVGHeader(markup, options);\r\n\r\n     \r\n      if (this.clipPath) {\r\n        markup.push('<g clip-path=\"url(#' + this.clipPath.clipPathId + ')\" >\\n');\r\n      }\r\n this._setSVGBgOverlayColor(markup, 'backgroundColor');\r\n      this._setSVGBgOverlayImage(markup, 'backgroundImage', reviver);\r\n      this._setSVGObjects(markup, reviver);\r\n      if (this.clipPath) {\r\n        markup.push('</g>\\n');\r\n      }\r\n      this._setSVGBgOverlayColor(markup, 'overlayColor');\r\n      this._setSVGBgOverlayImage(markup, 'overlayImage', reviver);\r\n\r\n      markup.push('</svg>');\r\n\r\n      return markup.join('');\r\n    },\r\n```\r\n\r\nor include overlays, not sure if overlay images should be clipped, but background definitely should be."},"comment":{"url":"https://api.github.com/repos/fabricjs/fabric.js/issues/comments/445464694","html_url":"https://github.com/fabricjs/fabric.js/issues/5415#issuecomment-445464694","issue_url":"https://api.github.com/repos/fabricjs/fabric.js/issues/5415","id":445464694,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0NTQ2NDY5NA==","user":{"login":"asturur","id":1194048,"node_id":"MDQ6VXNlcjExOTQwNDg=","avatar_url":"https://avatars3.githubusercontent.com/u/1194048?v=4","gravatar_id":"","url":"https://api.github.com/users/asturur","html_url":"https://github.com/asturur","followers_url":"https://api.github.com/users/asturur/followers","following_url":"https://api.github.com/users/asturur/following{/other_user}","gists_url":"https://api.github.com/users/asturur/gists{/gist_id}","starred_url":"https://api.github.com/users/asturur/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/asturur/subscriptions","organizations_url":"https://api.github.com/users/asturur/orgs","repos_url":"https://api.github.com/users/asturur/repos","events_url":"https://api.github.com/users/asturur/events{/privacy}","received_events_url":"https://api.github.com/users/asturur/received_events","type":"User","site_admin":false},"created_at":"2018-12-08T14:50:06Z","updated_at":"2018-12-08T14:50:06Z","author_association":"MEMBER","body":"thanks for the report, i ll fix this."}}
{"actor":{"display_login":"asturur"}}