当在页面中使用SVG时，SVG中的图像元素不会出现。 [英] Image elements in an SVG don't appear when the SVG is used in a page.

问题描述

我创建了一个 SVG 图像，它将图层叠加在一起，并动画化几个常规的 PNG 图像。如果我直接在浏览器中查看图片，则会显示为应该（大多数，反正 - 看起来像一个混合问题在FireFox，但这是另一个线程的问题）。但是当我使用页面中的图片时 - 在 img 标记或在元素的背景中，不会出现SVG中的 image 元素。

如果我把一个规则的形状粘贴到SVG，它显示出来，所以我知道SVG通常工作，但其中的图像永远不会出现。任何人都知道我做错了什么？

这里是文本形式的SVG，以方便参考：

 < svg xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkheight = 190width =640> 
 
< style type =text / css> 
<！[CDATA [
 
 .lighten {
 mix-blend-mode：lighten; 
} 
 
 .layer {
 
} 
 
]]> 
< / style> 
 
<！ - < rect width =640height =190fill =＃9da99e/> - > 
< image class =layer lightenwidth =640height =190xlink：href =http://omnichron.net/external/op/src/meridian/rays-bottom.png > 
< animateTransform attributeName =transformattributeType =XMLtype =rotatefrom =0 320 95to =360 320 95dur =79srepeatCount =indefinite/& 
< animate attributeName =opacityvalues =0.0; 0.8; 0.0dur =13srepeatCount =indefinite/> 
< / image> 
< image class =layer lightenwidth =640height =190xlink：href =http://omnichron.net/external/op/src/meridian/glyphs.png> 
< animateTransform attributeName =transformattributeType =XMLtype =rotatefrom =0 320 95to =360 320 95dur =97srepeatCount =indefinite/& 
< animate attributeName =opacityvalues =0.0; 0.6; 0.0dur =17srepeatCount =indefinite/> 
< / image> 
< image class =layerwidth =640height =190xlink：href =http://omnichron.net/external/op/src/meridian/compass.png/> 
< image class =layer lightenwidth =640height =190xlink：href =http://omnichron.net/external/op/src/meridian/rays-top.png > 
< animateTransform attributeName =transformattributeType =XMLtype =rotatefrom =360 320 95to =0 320 95dur =87srepeatCount =indefinite/& 
< animate attributeName =opacityvalues =0.0; 0.6; 0.0dur =13srepeatCount =indefinite/> 
< / image> 
< image class =layerwidth =640height =190xlink：href =http://omnichron.net/external/op/src/meridian/flare-back.png/ > 
< image class =layer lightenwidth =640height =190xlink：href =http://omnichron.net/external/op/src/meridian/flare-yellow.png > 
< animate attributeName =opacitydur =60srepeatCount =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.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.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.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 lightenwidth =640height =190xlink：href =http://omnichron.net/external/op/src/meridian/flare-white.png > 
< animate attributeName =opacitydur =60srepeatCount =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.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.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.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 letterswidth =640height =190xlink：href =http://omnichron.net/external/op/src/meridian/letters.png/> ; 
  

解决方案>

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

如果您想在SVG中包含图片需要将其编码为数据URI 。

I've created an SVG image which layers together and animates several conventional PNG images. If I look at the image directly in a browser, things appear as they should (mostly, anyway - looks like there's a blending issue in FireFox, but that's a problem for another thread). But when I use the image in a page - either in an img tag or in the background of an element, none of the image elements within the SVG appear.

If I stick a regular shape into the SVG, it shows up, so I know the SVG is generally working, but the images within it never show up. Anyone know what I'm doing wrong?

Here's the SVG in text form for ease of reference:

<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" />

解决方案

In order to protect your privacy SVG must be complete in a single file when used in an image context.

If you want to have images within the SVG you'll need to encode them as data URIs.

这篇关于当在页面中使用SVG时，SVG中的图像元素不会出现。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！