Bug 41952

Summary: linearGradient not working when created through Javascript
Product: WebKit Reporter: kentozier
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: RESOLVED WORKSFORME    
Severity: Normal CC: simon.fraser, zimmermann
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Mac (Intel)   
OS: OS X 10.6   
Attachments:
Description Flags
Testcase
none
SVG linearGradient failure test case none

kentozier
Reported 2010-07-09 04:53:27 PDT
Attempting to create a linear gradient doesn't seem to work in Safari. If you inspect the SVG in Safari's web inspector, the node seems to be created OK and contains all the necessary info, but Safari doesn't actually render it. All I get are black fills. Most other major browsers, not based on WebKit do render the gradient correctly. I'm not sure if radial gradient has this issue (don't have time to test right now) The following example code works in Firefox 3.6.6, Opera 10.6 and Google Chrome 5.0.375.99, but fails in Safari 5.0 (6533.16) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>WebKit SVG Linear Gradient Bug</title> <script language='javascript'> window.onload = function() { var SVG_URL = 'http://www.w3.org/2000/svg'; var SVG_WIDTH = 500; var SVG_HEIGHT = 500; // create the containing SVG view and add it to the document var view = document.createElementNS(SVG_URL, 'svg'); view.setAttribute('xmlns', SVG_URL); view.setAttributeNS(null, 'version', '1.1'); view.setAttributeNS(null, 'width', SVG_WIDTH); view.setAttributeNS(null, 'height', SVG_HEIGHT); document.body.appendChild(view); // create a linear gradient and add it to the view var grad = document.createElementNS(SVG_URL, 'linearGradient'); grad.setAttribute('id', 'SVG-GRAD'); view.appendChild(grad); // create color stop 1 and add to gradient var stop1 = document.createElementNS(SVG_URL, 'stop'); stop1.setAttributeNS(null, 'style', 'stop-color:#FF0000'); stop1.setAttributeNS(null, 'offset', 0); grad.appendChild(stop1); // create color stop 2 and add to gradient var stop2 = document.createElementNS(SVG_URL, 'stop'); stop2.setAttributeNS(null, 'style', 'stop-color:#000000'); stop2.setAttributeNS(null, 'offset', 1); grad.appendChild(stop2); // create circle, set it's fill to the gradient and add to view var circle = document.createElementNS(SVG_URL, 'circle'); circle.setAttributeNS(null, 'cx', SVG_WIDTH / 2); circle.setAttributeNS(null, 'cy', SVG_HEIGHT / 2); circle.setAttributeNS(null, 'r', 200); circle.setAttributeNS(null, 'fill', 'url(#SVG-GRAD)'); view.appendChild(circle); } </script> </head> <body> </body> </html>
Attachments
Testcase (1.71 KB, image/svg+xml)
2010-07-09 10:05 PDT, Simon Fraser (smfr) 		no flags
Details
SVG linearGradient failure test case (1.71 KB, application/xhtml+xml)
2010-07-09 14:10 PDT, kentozier 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
kentozier
Comment 1 2010-07-09 09:05:28 PDT
In an additional test, I found that if you copy the generated SVG directly out of Safari's web inspector, slap a 'DOCTYPE' and <?xml ...> header on it, save it as a file and drag that file into Safari, it does render the gradient. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500"> <linearGradient id="SVG-GRAD"> <stop style="stop-color:#FF0000" offset="0"></stop> <stop style="stop-color:#000000" offset="1"></stop> </linearGradient> <circle cx="250" cy="250" r="200" fill="url(#SVG-GRAD)"></circle> </svg> Since everything between the <svg>and </svg> tags was copied directly from the browser, this non-rendering only seems to be an issue when SVG gradients are generated dynamically.
Simon Fraser (smfr)
Comment 2 2010-07-09 10:04:09 PDT
Please attach a file that shows the problem.
Simon Fraser (smfr)
Comment 3 2010-07-09 10:05:55 PDT
Created attachment 61052 [details] Testcase Here's your testcase. It seems to work fine for me in Safari 5 and a nightly.
kentozier
Comment 4 2010-07-09 14:10:02 PDT
Created attachment 61090 [details] SVG linearGradient failure test case Attached file works in FF/Opera/Chrome. No go in Safari 5.0.
Simon Fraser (smfr)
Comment 5 2010-07-09 14:46:33 PDT
Comment on attachment 61090 [details] SVG linearGradient failure test case Fix the mime type.
Simon Fraser (smfr)
Comment 6 2010-07-09 14:47:02 PDT
Your testcase works if served with the correct MIME type.
kentozier
Comment 7 2010-07-09 15:24:07 PDT
(In reply to comment #6) > Your testcase works if served with the correct MIME type. I'm using html suffix for several reasons: - The SVG view is embedded in an html page. There is a lot of other stuff that goes on outside the SVG view and I want that to behave like a normal web page - 99.9 percent of web users have never heard of SVG, so it would seem very foreign to access a page with an svg suffix. - The root SVG view does indicate what namespace that section of the page uses (http://www.w3.org/2000/svg) - Other major browsers seem to have no problem figuring out what to do, including Google Chrome which is based on WebKit. Seems like either Google customized WebKit so this would work and didn't contribute the fix, or Chrome uses an older branch of WebKit and newer versions broke this capability.
Simon Fraser (smfr)
Comment 8 2010-07-09 15:37:47 PDT
Comment on attachment 61090 [details] SVG linearGradient failure test case Let's try XHTML
Simon Fraser (smfr)
Comment 9 2010-07-09 15:38:21 PDT
You need to use XHTML then.
kentozier
Comment 10 2010-07-09 16:08:39 PDT
(In reply to comment #9) > You need to use XHTML then. OK. That works, but I have to disagree with the decision to marked this as resolved. Here's why - I haven't tested all SVG functionality, but a significant portion of it does work correctly with a html suffix. Shapes, lines, colors, text, text transforms etc... - Given that so much of the other SVG functionality works even with an html suffix, that indicates to me that the gradient rendering code is not performing some check that the majority of other code does. I can live with the bug for now, but bottom line the other code works, linear gradient doesn't. That seems like a bug in my book. Thanks for the xhtml suggestion that at least serves as a stop gap.
Note You need to log in before you can comment on or make changes to this bug.