我正在加载一个svg对象进行操作。看来，当我点击链接进入页面时，svg加载并且$（窗口）.load在加载svg之前触发。但是，它在刷新页面时正常工作。我想也许是因为它首先从缓存加载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" />
答案 0 :(得分：1)
尝试使用$('#hero').ready()内的$(window).load()，看看会发生什么。请参阅this answer，它将一个加载处理程序附加到svg元素而不是一个就绪处理程序，但我认为任何一个应该可以工作。
答案 1 :(得分：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>