Question

当我使用Javascript生成svg时，不会在各种浏览器中显示radient。虽然完全显示了相同svg的静态副本。有人可以检查我的代码吗？

我正在使用Chrome（v30.x）和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>

Answer 1

stop元素也必须在SVG名称空间中，即

document.createElementNS(xmlns, "stop");

通过DOM生成的SVG辐射不呈现

1 个答案: