SVG在頁面中使用時，不會顯示SVG中的圖像元素。

Question

我創建了一張SVG圖像，它將多個圖層合併在一起並對幾張傳統的PNG圖像進行動畫處理。如果我直接在瀏覽器中查看the image，事情就會像他們應該看到的一樣（主要是，無論如何 - 看起來像在FireFox中存在混合問題，但這對另一個線程來說是一個問題）。但是，當我使用圖像in a page - 無論是在img標記中還是在元素的背景中，都不會顯示SVG中的image元素。

如果我將一個固定的形狀粘貼到SVG中，它就會顯示出來，所以我知道SVG一般可以正常工作，但其中的圖像從不出現。任何人都知道我在做什麼錯了？

下面是文本形式的SVG爲便於參考：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="190" width="640"> 

<style type="text/css" > 
    <![CDATA[ 

    .lighten{ 
     mix-blend-mode:lighten; 
    } 

    .layer{ 

    } 

    ]]> 
</style> 

<!-- <rect width="640" height="190" fill="#9da99e" /> --> 
<image class="layer lighten" width="640" height="190" xlink:href="http://omnichron.net/external/op/src/meridian/rays-bottom.png"> 
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 320 95" to="360 320 95" dur="79s" repeatCount="indefinite" /> 
    <animate attributeName="opacity" values="0.0;0.8;0.0" dur="13s" repeatCount="indefinite" /> 
</image> 
<image class="layer lighten" width="640" height="190" xlink:href="http://omnichron.net/external/op/src/meridian/glyphs.png"> 
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 320 95" to="360 320 95" dur="97s" repeatCount="indefinite" /> 
    <animate attributeName="opacity" values="0.0;0.6;0.0" dur="17s" repeatCount="indefinite" /> 
</image> 
<image class="layer" width="640" height="190" xlink:href="http://omnichron.net/external/op/src/meridian/compass.png" /> 
<image class="layer lighten" width="640" height="190" xlink:href="http://omnichron.net/external/op/src/meridian/rays-top.png"> 
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="360 320 95" to="0 320 95" dur="87s" repeatCount="indefinite" /> 
    <animate attributeName="opacity" values="0.0;0.6;0.0" dur="13s" repeatCount="indefinite" /> 
</image> 
<image class="layer" width="640" height="190" xlink:href="http://omnichron.net/external/op/src/meridian/flare-back.png" /> 
<image class="layer lighten" width="640" height="190" xlink:href="http://omnichron.net/external/op/src/meridian/flare-yellow.png"> 
    <animate attributeName="opacity" dur="60s" repeatCount="indefinite" 
     keytimes="0.00;0.04;0.06;0.08;0.12;0.14;0.15;0.16;0.17;0.18;0.10;0.23;0.24;0.25;0.28;0.32;0.33;0.34;0.35;0.36;0.37;0.38;0.39;0.40;0.41;0.46;0.47;0.48;0.49;0.50;0.54;0.55;0.56;0.57;0.58;0.60;0.61;0.62;0.63;0.64;0.66;0.68;0.70;0.72;0.74;0.75;0.76;0.77;0.18;0.80;0.86;0.87;0.88;0.89;0.90;0.92;0.93;0.94;0.94;0.98;1.00" 
     values="0.60;0.65;0.80;0.65;0.60;0.60;0.65;0.90;0.65;0.60;0.60;0.75;0.80;0.75;0.60;0.60;0.65;0.75;0.65;0.60;0.60;0.65;0.90;0.65;0.60;0.60;0.65;0.90;0.65;0.60;0.60;0.75;0.80;0.75;0.60;0.60;0.65;0.85;0.65;0.60;0.60;0.75;0.90;0.75;0.60;0.60;0.75;0.95;0.75;0.60;0.60;0.65;0.75;0.65;0.60;0.60;0.65;0.90;0.65;0.60;0.60" 
    /> 
</image> 
<image class="layer lighten" width="640" height="190" xlink:href="http://omnichron.net/external/op/src/meridian/flare-white.png"> 
    <animate attributeName="opacity" dur="60s" repeatCount="indefinite" 
     keytimes="0.00;0.04;0.06;0.08;0.12;0.14;0.15;0.16;0.17;0.18;0.10;0.23;0.24;0.25;0.28;0.32;0.33;0.34;0.35;0.36;0.37;0.38;0.39;0.40;0.41;0.46;0.47;0.48;0.49;0.50;0.54;0.55;0.56;0.57;0.58;0.60;0.61;0.62;0.63;0.64;0.66;0.68;0.70;0.72;0.74;0.75;0.76;0.77;0.18;0.80;0.86;0.87;0.88;0.89;0.90;0.92;0.93;0.94;0.94;0.98;1.00" 
     values="0.60;0.65;0.80;0.65;0.60;0.60;0.65;0.90;0.65;0.60;0.60;0.75;0.80;0.75;0.60;0.60;0.65;0.75;0.65;0.60;0.60;0.65;0.90;0.65;0.60;0.60;0.65;0.90;0.65;0.60;0.60;0.75;0.80;0.75;0.60;0.60;0.65;0.85;0.65;0.60;0.60;0.75;0.90;0.75;0.60;0.60;0.75;0.95;0.75;0.60;0.60;0.65;0.75;0.65;0.60;0.60;0.65;0.90;0.65;0.60;0.60" 
    /> 
</image> 
<image class="layer letters" width="640" height="190" xlink:href="http://omnichron.net/external/op/src/meridian/letters.png" /> 

Answer 1

爲了保護您的隱私SVG在圖像上下文中使用時，必須是在一個文件中完成。

如果你想在SVG中有圖像，你需要將它們編碼爲data URIs。