CODEWITHSUNDEEP
javascriptdomsvgrenderinggradient
merfor
merfor

Reputation: 1

SVG radient generated through DOM not rendered

When I generate svg using Javascript, the radient is not shown in various browsers. While the static copy of the same svg is shown perfectly. Can anyone check my code please?

I'm using Chrome (v30.x) and IE (v10.x)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SVG Gradient Test</title>
<script type="text/javascript">

function body_onload() {
    // This document contains two svg's. One is created trough Javascript 
    // and the other is just printed within the HTML. To my surprise the 
    // dynamic one doesn't show any gradient (in Chrome and IE)
    // what's wrong whith the code?

    var xmlns = "http://www.w3.org/2000/svg";
    // get svg 'holder' div
    var svgDiv = document.getElementById("svgDiv");

    // create svg and add to divHolder
    svg = document.createElementNS(xmlns, "svg");
    svg.setAttributeNS(null, "version", "1.1");
    svg.setAttributeNS(null, "baseProfile", "tiny");
    svgDiv.appendChild(svg);

    // add defs 
    var defs = document.createElementNS(xmlns, "defs");
    svg.appendChild(defs);

    // create linear Gradient called 'myGradient' to defs
    var linGrad = document.createElementNS(xmlns, "linearGradient"); 
    linGrad.setAttributeNS(null, "id", "myGradient");
    linGrad.setAttributeNS(null, "x1", "0%");
    linGrad.setAttributeNS(null, "y1", "0%");
    linGrad.setAttributeNS(null, "x2", "0%");
    linGrad.setAttributeNS(null, "y2", "100%");
    var stop1 = document.createElementNS(null, "stop");
    stop1.setAttributeNS(null, "offset", "0%");
    stop1.setAttributeNS(null, "stop-color", "red");
    stop1.setAttributeNS(null, "stop-opacity", "1");
    linGrad.appendChild(stop1);
    var stop2 = document.createElementNS(null, "stop");
    stop2.setAttributeNS(null, "offset", "100%");
    stop2.setAttributeNS(null, "stop-color", "blue");
    stop2.setAttributeNS(null, "stop-opacity", "1");
    linGrad.appendChild(stop2);   
    defs.appendChild(linGrad);

    // create rectangle and add to svg
    var rect = document.createElementNS(xmlns, "rect");
    rect.setAttributeNS(null, "x", "40");
    rect.setAttributeNS(null, "y", "20");
    rect.setAttributeNS(null, "width", "60");
    rect.setAttributeNS(null, "height", "90");
    rect.setAttributeNS(null, "fill", "url(#myGradient)");
    rect.setAttributeNS(null, "stroke", "black");
    rect.setAttributeNS(null, "stroke-width", "1");
    svg.appendChild(rect);
}
</script>
</head>
<body onload="javascript:body_onload();">
    <div id="svgDiv" style="width:200px; height:120px;"></div>
    <div id="svgDiv2" style="width:200px; height:200px;">
        <svg version="1.1" baseProfile="tiny">
            <defs>
                <linearGradient id="myGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" stop-color="red" stop-opacity="1"></stop>
                    <stop offset="100%" stop-color="blue" stop-opacity="1"></stop>
                </linearGradient>
            </defs>
            <rect x="40" y="20" width="60" height="90" fill="url(#myGradient2)" stroke="black" stroke-width="1"></rect>
        </svg>
    </div>
</body>
</html>

Upvotes: 0

Views: 146

Answers (1)

Robert Longson
Robert Longson

Reputation: 124129

stop elements must be in the SVG namespace too i.e.

document.createElementNS(xmlns, "stop");

Upvotes: 1

Related Questions