html – 在页面中使用SVG时,不会出现SVG中的图像元素.

概述我创建了一个SVG图像,它将图层组合在一起并激活了几个传统的PNG图像.如果我直接在浏览器中查看 the image,事情就会出现(大多数情况下,看起来好像是FireFox中存在混合问题,但这对另一个线程来说是一个问题).但是当我使用图像 in a page时 – 无论是在img标签中还是在元素的背景中,SVG中都不会出现任何图像元素. 如果我将常规形状粘贴到SVG中,它会显示出来,因此我知道SV 我创建了一个SVG图像,它将图层组合在一起并激活了几个传统的PNG图像.如果我直接在浏览器中查看 the image,事情就会出现(大多数情况下,看起来好像是firefox中存在混合问题,但这对另一个线程来说是一个问题).但是当我使用图像 in a page时 – 无论是在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  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  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  wIDth="640" height="190" xlink:href="http://omnichron.net/external/op/src/merIDian/compass.png" /><image  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  wIDth="640" height="190" xlink:href="http://omnichron.net/external/op/src/merIDian/flare-back.png" /><image  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  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  wIDth="640" height="190" xlink:href="http://omnichron.net/external/op/src/merIDian/letters.png" />

解决方法 为了保护您的隐私,在图像上下文中使用SVG时必须在单个文件中完成.

如果您想在SVG中拥有图像,则需要将它们编码为data URIs.

总结

以上是内存溢出为你收集整理的html – 在页面中使用SVG时,不会出现SVG中的图像元素.全部内容，希望文章能够帮你解决html – 在页面中使用SVG时,不会出现SVG中的图像元素.所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。