{"action":"closed","issue":{"url":"https://api.github.com/repos/gabelerner/canvg/issues/282","labels_url":"https://api.github.com/repos/gabelerner/canvg/issues/282/labels{/name}","comments_url":"https://api.github.com/repos/gabelerner/canvg/issues/282/comments","events_url":"https://api.github.com/repos/gabelerner/canvg/issues/282/events","html_url":"https://github.com/gabelerner/canvg/issues/282","id":51229643,"number":282,"title":"clip-path should be treated as attribute instead of style","user":{"login":"gabelerner","id":241819,"avatar_url":"https://avatars.githubusercontent.com/u/241819?v=3","gravatar_id":"","url":"https://api.github.com/users/gabelerner","html_url":"https://github.com/gabelerner","followers_url":"https://api.github.com/users/gabelerner/followers","following_url":"https://api.github.com/users/gabelerner/following{/other_user}","gists_url":"https://api.github.com/users/gabelerner/gists{/gist_id}","starred_url":"https://api.github.com/users/gabelerner/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gabelerner/subscriptions","organizations_url":"https://api.github.com/users/gabelerner/orgs","repos_url":"https://api.github.com/users/gabelerner/repos","events_url":"https://api.github.com/users/gabelerner/events{/privacy}","received_events_url":"https://api.github.com/users/gabelerner/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/gabelerner/canvg/labels/bug","name":"bug","color":"fc2929"},{"url":"https://api.github.com/repos/gabelerner/canvg/labels/imported","name":"imported","color":"FFFFFF"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2014-12-07T20:08:46Z","updated_at":"2015-02-16T05:26:18Z","closed_at":"2015-02-16T05:26:18Z","body":"_From [d...@pinholepress.com](https://code.google.com/u/100696037172429406866/) on May 07, 2014 15:40:05_\n\nIt looks like there's an issue where Canvg is incorrectly treating the clip-path attribute as a style. This causes issues when you try to embed an element inside an element with the clip-path. In this situation, the clip-path will get applied a second time to the internal element when it traverses up the tree to find the style.\r\n\r\nHere's a sample SVG that produces the problem:\r\n\r\n<svg xmlns=\" http://www.w3.org/2000/svg \" id=\"Layer_1\" enable-background=\"new 0 0 612 792\" viewBox=\"0 0 612 792\" x=\"0px\" y=\"0px\" width=\"612px\" height=\"792px\" xmlns:xml=\" http://www.w3.org/XML/1998/namespace \" xml:space=\"preserve\" version=\"1.1\">\r\n  <defs>\r\n    <clipPath id=\"clip-mask\">\r\n      <rect x=\"0\" y=\"0\" width=\"256\" height=\"256\"></rect>\r\n    </clipPath>\r\n  </defs>\r\n  <g clip-path=\"url('#clip-mask')\">\r\n    <g transform=\"translate(-128 -128)\">\r\n      <rect x=\"0\" y=\"0\" width=\"1024\" height=\"1024\" fill=\"#f00\"></rect>\r\n    </g>\r\n  </g>\r\n</svg>\r\n\r\nI've attached two files that show the resulting output of that SVG using Canvg and Chrome for rendering. In Chrome, you should see a 256 x 256 red rectangle, but you only see a 128 x 128 red rectangle in Canvg.\r\n\r\nTo fix the problem, you should just need to modify svg.Element.RenderedElementBase. This code snippet is the issue:\r\n\r\n// clip\r\nif (this.style('clip-path').hasValue()) {\r\n    var clip = this.style('clip-path').getDefinition();\r\n    if (clip != null) clip.apply(ctx);\r\n}\r\n\r\nIf you modify the calls to this.style in that snippet to instead use this.attribute, it fixes the problem.\r\n\r\nPlease let me know if you need any more information, thanks.\n\n**Attachment:** [canvg-bug-output-chrome.png canvg-bug-canvg-output.png](http://code.google.com/p/canvg/issues/detail?id=282)\n\n_Original issue: http://code.google.com/p/canvg/issues/detail?id=282_"}}