{"action":"created","issue":{"url":"https://api.github.com/repos/plotly/plotly.js/issues/3260","repository_url":"https://api.github.com/repos/plotly/plotly.js","labels_url":"https://api.github.com/repos/plotly/plotly.js/issues/3260/labels{/name}","comments_url":"https://api.github.com/repos/plotly/plotly.js/issues/3260/comments","events_url":"https://api.github.com/repos/plotly/plotly.js/issues/3260/events","html_url":"https://github.com/plotly/plotly.js/issues/3260","id":382129598,"node_id":"MDU6SXNzdWUzODIxMjk1OTg=","number":3260,"title":"[Bug?] Strange clip-path problem ","user":{"login":"Braintelligence","id":6761196,"node_id":"MDQ6VXNlcjY3NjExOTY=","avatar_url":"https://avatars1.githubusercontent.com/u/6761196?v=4","gravatar_id":"","url":"https://api.github.com/users/Braintelligence","html_url":"https://github.com/Braintelligence","followers_url":"https://api.github.com/users/Braintelligence/followers","following_url":"https://api.github.com/users/Braintelligence/following{/other_user}","gists_url":"https://api.github.com/users/Braintelligence/gists{/gist_id}","starred_url":"https://api.github.com/users/Braintelligence/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Braintelligence/subscriptions","organizations_url":"https://api.github.com/users/Braintelligence/orgs","repos_url":"https://api.github.com/users/Braintelligence/repos","events_url":"https://api.github.com/users/Braintelligence/events{/privacy}","received_events_url":"https://api.github.com/users/Braintelligence/received_events","type":"User","site_admin":false},"labels":[{"id":282886923,"node_id":"MDU6TGFiZWwyODI4ODY5MjM=","url":"https://api.github.com/repos/plotly/plotly.js/labels/type:%20bug","name":"type: bug","color":"e31a1c","default":false}],"state":"open","locked":false,"assignee":{"login":"etpinard","id":6675409,"node_id":"MDQ6VXNlcjY2NzU0MDk=","avatar_url":"https://avatars0.githubusercontent.com/u/6675409?v=4","gravatar_id":"","url":"https://api.github.com/users/etpinard","html_url":"https://github.com/etpinard","followers_url":"https://api.github.com/users/etpinard/followers","following_url":"https://api.github.com/users/etpinard/following{/other_user}","gists_url":"https://api.github.com/users/etpinard/gists{/gist_id}","starred_url":"https://api.github.com/users/etpinard/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/etpinard/subscriptions","organizations_url":"https://api.github.com/users/etpinard/orgs","repos_url":"https://api.github.com/users/etpinard/repos","events_url":"https://api.github.com/users/etpinard/events{/privacy}","received_events_url":"https://api.github.com/users/etpinard/received_events","type":"User","site_admin":false},"assignees":[{"login":"etpinard","id":6675409,"node_id":"MDQ6VXNlcjY2NzU0MDk=","avatar_url":"https://avatars0.githubusercontent.com/u/6675409?v=4","gravatar_id":"","url":"https://api.github.com/users/etpinard","html_url":"https://github.com/etpinard","followers_url":"https://api.github.com/users/etpinard/followers","following_url":"https://api.github.com/users/etpinard/following{/other_user}","gists_url":"https://api.github.com/users/etpinard/gists{/gist_id}","starred_url":"https://api.github.com/users/etpinard/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/etpinard/subscriptions","organizations_url":"https://api.github.com/users/etpinard/orgs","repos_url":"https://api.github.com/users/etpinard/repos","events_url":"https://api.github.com/users/etpinard/events{/privacy}","received_events_url":"https://api.github.com/users/etpinard/received_events","type":"User","site_admin":false}],"milestone":null,"comments":12,"created_at":"2018-11-19T09:40:27Z","updated_at":"2018-11-21T06:29:46Z","closed_at":null,"author_association":"NONE","body":"Hi everyone.\r\n\r\nSo I have this strange problem, where the clip-path in the SVG is wrong due to addition of the location to the clip-path url.\r\n\r\nI have the exact same HTML offline, where when you generate the SVG from a `file://` location you get something like:\r\n```SVG\r\n<defs id=\"defs-fac894\">\r\n        <g class=\"clips\">\r\n            <clipPath id=\"clipfac894xyplot\" class=\"plotclip\"><rect width=\"518\" height=\"350\"/></clipPath>\r\n            ...\r\n```\r\ntogether with:\r\n```SVG\r\n<g class=\"cartesianlayer\">\r\n        <g class=\"subplot xy\">\r\n            ...\r\n            <g class=\"plot\" transform=\"translate(42, 50)\" clip-path=\"url(#clipfac894xyplot)\">\r\n            ...\r\n```\r\n\r\nBut when you do the same online you get:\r\n```SVG\r\n<defs id=\"defs-6f068e\">\r\n        <g class=\"clips\">\r\n            <clipPath id=\"clip6f068exyplot\" class=\"plotclip\"><rect width=\"518\" height=\"350\"/></clipPath>\r\n            ...\r\n```\r\ntogether with:\r\n```SVG\r\n<g class=\"cartesianlayer\">\r\n        <g class=\"subplot xy\">\r\n             ...\r\n            <g class=\"plot\" transform=\"translate(42, 50)\" clip-path=\"url(https://www.mydomain.com#clip6f068exyplot)\">\r\n             ...\r\n```\r\n\r\n**If you use `.downloadImage` on the original state of each plot, both images are identical.** If you do this **with a zoomed state**, where you **pass the `x.range` and `y.range`** to the `layout` for `.downloadImage` **the resulting image isn't clipped correctly _in the online version_**.\r\n\r\nThis is an image that results of the first code (used offline with file://-URL) after zooming: [svg_offline.zip](https://github.com/plotly/plotly.js/files/2594588/svg_offline.zip)\r\n\r\nThis is an image that results of the latter code (used online with https://-URL) after zooming: [svg_online.zip](https://github.com/plotly/plotly.js/files/2594590/svg_online.zip)\r\n\r\nWhen you change \r\n```SVG\r\n<g class=\"plot\" transform=\"translate(42, 50)\" clip-path=\"url(https://www.mydomain.com#clip6f068exyplot)\">\r\n``` \r\nto \r\n```SVG\r\n<g class=\"plot\" transform=\"translate(42, 50)\" clip-path=\"url(#clip6f068exyplot)\">\r\n``` \r\n(in other words: remove the location part from the url) you get the desired image.\r\n\r\nThis was tested with the current Firefox 63 as well as Firefox 52 ESR and current Microsoft Edge."},"comment":{"url":"https://api.github.com/repos/plotly/plotly.js/issues/comments/440551605","html_url":"https://github.com/plotly/plotly.js/issues/3260#issuecomment-440551605","issue_url":"https://api.github.com/repos/plotly/plotly.js/issues/3260","id":440551605,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0MDU1MTYwNQ==","user":{"login":"Braintelligence","id":6761196,"node_id":"MDQ6VXNlcjY3NjExOTY=","avatar_url":"https://avatars1.githubusercontent.com/u/6761196?v=4","gravatar_id":"","url":"https://api.github.com/users/Braintelligence","html_url":"https://github.com/Braintelligence","followers_url":"https://api.github.com/users/Braintelligence/followers","following_url":"https://api.github.com/users/Braintelligence/following{/other_user}","gists_url":"https://api.github.com/users/Braintelligence/gists{/gist_id}","starred_url":"https://api.github.com/users/Braintelligence/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Braintelligence/subscriptions","organizations_url":"https://api.github.com/users/Braintelligence/orgs","repos_url":"https://api.github.com/users/Braintelligence/repos","events_url":"https://api.github.com/users/Braintelligence/events{/privacy}","received_events_url":"https://api.github.com/users/Braintelligence/received_events","type":"User","site_admin":false},"created_at":"2018-11-21T06:29:46Z","updated_at":"2018-11-21T06:29:46Z","author_association":"NONE","body":"@etpinard @alexcjohnson \r\n\r\nHere's a fiddle you can play around with: https://jsfiddle.net/1Lh8dm49/\r\n\r\nSee how the xaxis is not clipped at y=0 for the downloaded svg even though the range is set. You also see the base url in the clip-path and when you remove it, the xaxis is clipped as it should be."}}
{"actor":{"display_login":"Braintelligence"}}