0

操作する svg オブジェクトを読み込んでいます。リンクをクリックしてページに入ると、svg が読み込まれ、svg が読み込まれる直前に $(window).load が起動するようです。ただし、ページを更新すると正常に動作します。おそらく、最初にキャッシュからsvgをロードしているためだと思いますか？何か私にできることはありますか？私が考えることができる唯一のことは、短い遅延を追加するなど、非常に見掛け倒しです...そしてこれはfirefoxでは問題にならないようです。クロームのみ。

function getSubDocument(embedding_element) {
    if(embedding_element.contentDocument) {
        return embedding_element.contentDocument;
    } else {
        var subdoc = null;
        try {
            subdoc = embedding_element.getSVGDocument();
        } catch(e) {}
        return subdoc;
    }
}
$(window).load(function () {
    alert('loading complete');
    var a = document.getElementById("hero");
    var svgDoc = getSubDocument(a); //a.contentDocument; //get the inner DOM of alpha.svg
    var hair = svgDoc.getElementById("hair");
    var shirt = svgDoc.getElementById("body");
    var head = svgDoc.getElementById("head");
    var left_arm = svgDoc.getElementById("left_arm");
    var right_arm = svgDoc.getElementById("right_arm");
    var pants = svgDoc.getElementById("pants");
    //var weapon = svgDoc.getElementById('axe');
    //weapon.setAttribute('display', "");
    hair.setAttribute("fill", '{{ profile.hair_color }}');
    shirt.setAttribute("fill", '{{ profile.shirt_color }}');
    head.setAttribute("fill", '{{ profile.skin_color }}');
    left_arm.setAttribute("fill", '{{ profile.skin_color }}');
    right_arm.setAttribute("fill", '{{ profile.skin_color }}');
    pants.setAttribute("fill", '{{ profile.pants_color }}');

    $("input[name='colorType']").change(function () {
        var ct = $("input[name='colorType']:checked").val();
        var c;
        if(ct == 'Hair') {
            c = $("#id_hair_color").val();

        } else if(ct == 'Shirt') {
            c = $("#id_shirt_color").val();
        } else if(ct == 'Skin') {
            c = $("#id_skin_color").val();
        } else if(ct == 'Pants') {
            c = $("#id_pants_color").val();
        }
        $.farbtastic('#colorpicker').setColor(c);
    });

    $('#colorpicker').farbtastic(function (e) {
        var ct = $("input[name='colorType']:checked").val();
        c = $.farbtastic('#colorpicker').color;
        if(ct == 'Hair') {
            hair.setAttribute('fill', c);
            $("#id_hair_color").val(c);
        } else if(ct == 'Shirt') {
            shirt.setAttribute('fill', c);
            $("#id_shirt_color").val(c);
        } else if(ct == 'Skin') {
            head.setAttribute('fill', c);
            left_arm.setAttribute('fill', c);
            right_arm.setAttribute('fill', c);
            $("#id_skin_color").val(c);
        } else if(ct == 'Pants') {
            pants.setAttribute('fill', c);
            $("#id_pants_color").val(c);
        }
        // conole.log(JSON.stringify($.farbtastic('#colorpicker').color));

        // hair.setAttribute("fill", c);
    });
    $.farbtastic('#colorpicker').setColor("#f0ff5f");
    // var sword = svgDoc.getElementById("right_arm"); //get the inner element by id
    // // sword.addEventListener("mousedown",function(){alert('hello world!')},false);
    // alert('got to here');

});

html

<embed src="/static/images/hero2.svg" style="width: 100%" id="hero" type="image/svg+xml" />
4

2 に答える 2

0

$(window).load 内でタイムアウトを設定することになりました。10 ミリ秒の遅延で十分なようです。私の携帯電話、タブレット、およびクロムで問題なく動作します。私はそれがキャッシングと関係があるとかなり確信しています。

私はこれを答えとしてマークしていません。うまくいけば、他の誰かがより良い方法を見つけることができます。

<script type='text/javascript'>
    function getSubDocument(embedding_element)
    {
        if (embedding_element.contentDocument) 
        {
            return embedding_element.contentDocument;
        } 
        else 
        {
            var subdoc = null;
            try {
                subdoc = embedding_element.getSVGDocument();
            } catch(e) {}
            return subdoc;
        }
    }
    $(window).load(function(){
        setTimeout(function(){
            var a = document.getElementById("hero");
            var svgDoc = getSubDocument(a);//a.contentDocument; //get the inner DOM of alpha.svg
            var hair = svgDoc.getElementById("hair");
            var shirt = svgDoc.getElementById("body");
            var head = svgDoc.getElementById("head");
            var left_arm = svgDoc.getElementById("left_arm");
            var right_arm = svgDoc.getElementById("right_arm");
            var pants = svgDoc.getElementById("pants");
            //var weapon = svgDoc.getElementById('axe');
            //weapon.setAttribute('display', "");
            hair.setAttribute("fill", '{{ profile.hair_color }}' );
            shirt.setAttribute("fill", '{{ profile.shirt_color }}' );
            head.setAttribute("fill", '{{ profile.skin_color }}' );
            left_arm.setAttribute("fill", '{{ profile.skin_color }}' );
            right_arm.setAttribute("fill", '{{ profile.skin_color }}' );
            pants.setAttribute("fill", '{{ profile.pants_color }}' );

            $("input[name='colorType']").change(function(){
                var ct = $("input[name='colorType']:checked").val();
                var c;
                if(ct == 'Hair'){
                   c = $("#id_hair_color").val();

                }
                else if (ct == 'Shirt'){
                    c = $("#id_shirt_color").val();
                }
                else if (ct == 'Skin'){
                    c = $("#id_skin_color").val();
                }
                else if (ct == 'Pants'){
                    c = $("#id_pants_color").val();
                }
                $.farbtastic('#colorpicker').setColor(c);
            });
            $("#weapon_type").change(function(){
                nw = $("#weapon_type").val();
                svgDoc.getElementById('sword').setAttribute('display', 'none');
                svgDoc.getElementById('axe').setAttribute('display', 'none');
                svgDoc.getElementById(nw).setAttribute('display', '');

            });

            $('#colorpicker').farbtastic(function(e){
                var ct = $("input[name='colorType']:checked").val();
                c = $.farbtastic('#colorpicker').color;
                if(ct == 'Hair'){
                    hair.setAttribute('fill', c);
                    $("#id_hair_color").val(c);
                }
                else if (ct == 'Shirt'){
                    shirt.setAttribute('fill', c);
                    $("#id_shirt_color").val(c);
                }
                else if (ct == 'Skin'){
                    head.setAttribute('fill', c);
                    left_arm.setAttribute('fill', c);
                    right_arm.setAttribute('fill', c);
                    $("#id_skin_color").val(c);
                }
                else if (ct == 'Pants'){
                    pants.setAttribute('fill', c);
                    $("#id_pants_color").val(c);
                }
                // conole.log(JSON.stringify($.farbtastic('#colorpicker').color));

                // hair.setAttribute("fill", c);
            });
            $.farbtastic('#colorpicker').setColor("#f0ff5f");
            // var sword = svgDoc.getElementById("right_arm"); //get the inner element by id
            // // sword.addEventListener("mousedown",function(){alert('hello world!')},false);
            // alert('got to here');
        }, 10);
    });
</script>
于 2013-05-01T07:10:19.477 に答える