Html 在页面中使用SVG时，SVG中的图像元素不会出现。

我创建了一个SVG图像，它将多个传统PNG图像分层并设置动画。如果我直接在浏览器中查看，不管怎么说，事情看起来应该是这样的——看起来FireFox中存在混合问题，但这是另一个线程的问题。但是当我在img标记或元素背景中使用图像时，SVG中的图像元素都不会出现

如果我将一个规则形状粘贴到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" />

---

为了保护您的隐私，在图像上下文中使用SVG时，必须在单个文件中完成

---

如果您希望在SVG中包含图像，则需要将其编码为。

这就成功了。非常感谢。尽管我不得不说，这似乎是个愚蠢的限制理由。他们想保护什么？创建者可公开访问的网站地址？呵呵。为了便于其他人参考，这里有一个在线URI编码器，可以处理较大的图像，只需将原始输出复制到href中即可：如果你从网站上传图像，你不希望该图像能够跟踪你。如果一个映像能够发出外部加载请求，那么这可能会发生。啊，这是有道理的。谢谢事实证明，这个问题在Chrome和Safari for iOS中仍然存在。任何人都能看到的其他问题？