Question

我可以在html体内成功运行，例如......

<div id="myContainer" style="float: left; background-color: Blue; height: 100px;
            width: 100px;">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%">
                <defs>
                    <lineargradient id="myLinearGradient" x1="0%" x2="0%" y1="0%" y2="100%">
                        <stop id="start" offset="50%" style="stop-color: White; stop-opacity: 1" />
                        <stop id="stop" offset="60%" style="stop-color: #99cd9f; stop-opacity: 1" />
                    </lineargradient>
                </defs>
                <circle cx="50px" cy="50px" r="50px" fill="url(#myLinearGradient)" />
            </svg>
        </div>

但是，我需要使用javascript动态创建它。只创建圆圈就可以正常工作了，当我将圆圈填充到线性梯度时它失败了 - 我只是得到一个黑色圆圈。

我认为我没有设置停止＆＃39;风格＆＃39;属性正确。我试过另一种方法无济于事，见下文......

我正在使用Chrome，并提前致谢！

在体内：

    <body>
<div style="float: left; background-color: Blue; height: 100px;
                width: 100px;">
                <svg id="Svg1" xmlns="http://www.w3.org/2000/svg">
                    <defs id="mydefs">
                    </defs>
                </svg>
            </div>
</body>

My script:
    <script>

                // lineargradient 
                var myLinearGradient = document.createElementNS("http://www.w3.org/2000/svg", "lineargradient");
                myLinearGradient.setAttribute("id", "myLGID");
                myLinearGradient.setAttribute("x1", "0%");
                myLinearGradient.setAttribute("x2", "0%");
                myLinearGradient.setAttribute("y1", "0%");
                myLinearGradient.setAttribute("y2", "100%");

                document.getElementById("mydefs").appendChild(myLinearGradient);

                //stops
                var stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
                stop1.setAttribute("id", "myStop1");
                stop1.setAttribute("offset", "70%");
                //stop1.setAttribute("style", "stop-color: White; stop-opacity: 1");
                stop1.setAttribute("stop-color", "White");
                document.getElementById("mydefs").appendChild(stop1);

                var stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
                stop2.setAttribute("id", "myStop2");
                stop2.setAttribute("offset", "80%");
                //stop2.setAttribute("style", "stop-color: #99cd9f; stop-opacity: 1");
                stop2.setAttribute("stop-color", "#99cd9f");
                document.getElementById("mydefs").appendChild(stop2);

                // Circle
                var myCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
                myCircle.setAttribute("id", "idCircle");
                myCircle.setAttribute("cx", "50px");
                myCircle.setAttribute("cy", "50px");
                myCircle.setAttribute("r", "50px");

                myCircle.setAttribute("fill", "url(#myLGID)");

                document.getElementById("Svg1").appendChild(myCircle);
            </script>

Answer 1

两件事：

线性渐变的元素名称为linearGradient，而非lineargradient。
您必须将停靠点附加到linearGradient元素，而不是defs元素。

查看working example。

使用JavaScript时的动态SVG线性渐变

1 个答案: