Question

我已经能够将其他SVG加载到Snap中，但无论我做什么或看我如何，它都不会出现。它通过src在Snap之外正常工作：将它放在标签内。

罪魁祸首是http://upload.wikimedia.org/wikipedia/commons/c/c4/Icehockeylayout.svg

我试过移动它以查看它是否以某种方式被放置在视图之外并查看了普通的SVG源以找到任何无效的答案。

将鼠标悬停在devtools中DOM树内的已加载的svg标记（不是Snap svg标记）上显示任何内容 - 就像它被隐藏一样（没有突出显示的边界框）。

我错过了一些明显的东西吗？与其他人相比，svg看起来并不特别。问题是Snap还是SVG？

试试这个jsFiddle进行演示：http://jsfiddle.net/rdtztLe8/

var s = Snap(400,300);

var url = "http://upload.wikimedia.org/wikipedia/commons/c/c4/Icehockeylayout.svg";

var d = document.getElementById('text');

Snap.load(url, function(f) {
    s.append(f);
    d.innerHTML = 'svg "loaded" with snap';

    setTimeout(function(){
        d.innerHTML = "let's try with img tag";
    }, 2000);

    // try with ing tag
    setTimeout(function() {
        var i = document.getElementById('img');
        i.src = url;
        d.innerHTML = "img tag works - but not snap sag?";
    }, 5000);    
});

由于

Answer 1

所以Mardeg在mozilla IRC的#svg（sand.mozilla.org）中回答了这个问题。

基本上snap无法处理标签的xml svg前缀。快速％s / svg：// g后来它运行得很好。

<Mardeg> jinjin: is the Snap library failing because http://upload.wikimedia.org/wikipedia/commons/c/c4/Icehockeylayout.svg prefixes every tag with the svg namespace, like <svg:svg> and <svg:pattern> etc?
<jinjin> hmm
<jinjin> you might be onto something the other sag's I tried don't seem to do that
<jinjin> will test
<Mardeg> xml namespacing is something that is allowed in standalone .svg files, being xml compatible. But I'm not sure how that then behaves as straight code inside .html files.. unless Snap is failing to include the namespacing when injecting the code into the page or something
<Mardeg> usually the declaration is xmlns="http://www.w3.org/2000/svg" for svg files, but xmlns:svg="http://www.w3.org/2000/svg" is also valid
<Mardeg> which means everything is prefixed with svg:
<jinjin> mother god you are right!

SnapSVG加载vs img.src

1 个答案: