[]SVG渐变精灵的扩展脚本继承了多个精灵, 在safari环境下重叠了渲染

你好
小弟写了一个把用SVG制作成渐变字体, 然后以loadImage()的方式加载到精灵, 再以扩展脚本的方式加到IDE上的精灵上,  
例如画面上有3个精灵分别显示了: "Hello", "World", "Hello World"的渐变文字, 
在Safari环境下却变成"Hello" , "Hello"+"World"(重疊), "Hello"+"World"+"Hello World"(重疊), 如附图, 在Chrome或Opera环境下是没有重叠的问题, 小弟想不到解决的方向, 求大大指点, 感激






 
附上渐变SVG文字的代码:
 
/**
* this class is a extension of texts with gradient color 
*/
var effect;
(function (effect) {
    var GradientText = (function (_super) {

        const style = {
            DEFAULT: "default",
            VERTICAL: "vertical",
            HORIZONTAL: "horizontal",
            TOP_LEFT: "topLeft",
            TOP_RIGHT: "topRight",
        };

        // gradient direction
        const VERTICAL_GRADIENT = 'x1="0" x2="1" y1="0" y2="0"';
        const HORIZONTAL_GRADIENT = 'x1="0" x2="0" y1="0" y2="1"';
        const TOP_RIGHT_GRADIENT = 'x1="1" x2="0" y1="0" y2="1"';
        const DEFAULT_GRADIENT = 'x1="0" x2="1" y1="0" y2="1"';

        const DEFAULT_COLOR_1 = "%23fff4dc";
        const DEFAULT_COLOR_2 = "%23e4cea3";

        let gradientStyle = "";

        function GradientText() {
            GradientText.super(this);

            //自定义的脚本会有时序问题，所以在此添加一个延时
            this.frameOnce(2, this, this.init);
        }
        Laya.class(GradientText, "effect.GradientText", _super);

        let _proto = GradientText.prototype;

        _proto.init = function () {
            switch (this.style) {
                case style.VERTICAL:
                    gradientStyle = VERTICAL_GRADIENT + '>';
                    break;
                case style.HORIZONTAL:
                    gradientStyle = HORIZONTAL_GRADIENT + '>';
                    break;
                case style.TOP_RIGHT:
                    gradientStyle = TOP_RIGHT_GRADIENT + '>';
                    break;
                default:
                    gradientStyle = DEFAULT_GRADIENT + '>';
                    break;
            }

            if (this.style === style.DEFAULT) {
                this.color1Size = 20;
                this.color1 = DEFAULT_COLOR_1;
                this.color2Size = 40;
                this.color2 = DEFAULT_COLOR_2;
                this.color3Size = 60;
                this.color3 = DEFAULT_COLOR_1;
                this.color4Size = 80;
                this.color4 = DEFAULT_COLOR_2;
                this.color5Size = 100;
                this.color5 = DEFAULT_COLOR_1;
            }

            this.setGradientText();
        };

        _proto.getLangId = function () {
            return this.langId;
        }

        _proto.setGradientText = function () {

            this.graphics.clear();

            let data = '';

            data += 'data:image/svg+xml,' + '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" ';

            data += 'viewBox="0 0 ' + this.width + ' ' + this.height + '" ';

            // set svg width and height
            data += 'width="' + this.width + '" height="' + this.height + '">';

            data += '<defs>';

            // set gradient
            data += '<linearGradient id="Gradient" ' + gradientStyle;

            data += '<stop offset="' + this.color1Size + '%" stop-color="' + this.color1 + '"/>';
            data += '<stop offset="' + this.color2Size + '%" stop-color="' + this.color2 + '"/>';
            data += '<stop offset="' + this.color3Size + '%" stop-color="' + this.color3 + '"/>';
            data += '<stop offset="' + this.color4Size + '%" stop-color="' + this.color4 + '"/>';
            data += '<stop offset="' + this.color5Size + '%" stop-color="' + this.color5 + '"/>';

            data += '</linearGradient>';
            // End of set gradient

            // set shadow
            data += '<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">';
            data += '<feGaussianBlur stdDeviation="2 2" result="shadow"/>';
            data += '<feOffset dx="6" dy="6"/>'
            data += '</filter>'
            // End of set shadow

            data += '</defs>';

            if (this.isShadow) {
                // alignment
                data += this.getTextAlignment();

                data += 'font-size="' + this.fontSize;

                data += '" filter= "url(%23shadow)" fill="black"'

                data += " font-family='" + '"微軟正黑體",arial,sans-serif' + "'";

                data += '>';

                data += this.text + '</text> ';
            }

            // alignment
            data += this.getTextAlignment();

            data += 'font-size="' + this.fontSize;

            if (this.isGradient)
                data += '" fill="url(%23Gradient)"';
            else
                data += '" fill="white"';

            data += " font-family='" + '"微軟正黑體",arial,sans-serif' + "'";

            data += '>';

            data += this.text + '</text> ';

            data += '</svg>';

            this.loadImage(data, 0, 0, this.width, this.height);
        };


        _proto.getTextAlignment = function () {
            let alignmentText = "";
            let isFF = Laya.Browser.onFirefox;

            switch (this.textAlignment) {
                case "left":
                    console.log(this.text + " left");
                    if (isFF) {
                        alignmentText = '<text text-anchor="start" dominant-baseline="middle" ';
                    } else {
                        alignmentText = '<text text-anchor="start" alignment-baseline="middle" ';
                    }
                    alignmentText += 'x="' + 0 + '" y="' + this.height / 2 + '" ';
                    break;
                case "right":
                    if (isFF) {
                        alignmentText = '<text text-anchor="end" dominant-baseline="middle" ';
                    } else {
                        alignmentText = '<text text-anchor="end" alignment-baseline="middle" ';
                    }
                    alignmentText += 'x="' + this.width + '" y="' + this.height / 2 + '" ';
                    break;
                default:
                    if (isFF) {
                        alignmentText = '<text text-anchor="middle" dominant-baseline="middle" ';
                    } else {
                        alignmentText = '<text text-anchor="middle" alignment-baseline="middle" ';
                    }
                    alignmentText += 'x="' + this.width / 2 + '" y="' + this.height / 2 + '" ';
                    break;
            };

            return alignmentText;
        };

        return GradientText;
    }(Laya.Sprite));
    effect.GradientText = GradientText;
})(effect || (effect = {}));