[Webkit-unassigned] [Bug 41952] New: linearGradient not working when created through Javascript

Fri Jul 9 04:53:27 PDT 2010

https://bugs.webkit.org/show_bug.cgi?id=41952

           Summary: linearGradient not working when created through
                    Javascript
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Macintosh Intel
        OS/Version: Mac OS X 10.6
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: SVG
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: kentozier at gmail.com

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>

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.