链接.png的SVG无法呈现

时间:2015-10-25 16:28:44

标签: javascript html css svg

这是我的svg:

https://s3-us-west-2.amazonaws.com/idelog/assets/cultii_logo_final.svg

它包含一个链接的.png。它本身在浏览器中渲染得很好(如你点击上面的链接就会看到)。

但是当我在IMG标签中使用它时,png部分无法在Chrome或Firefox中呈现:

http://plnkr.co/edit/tjNeMgFxpU91q8swBkPX?p=preview

  <body>
    <h1>SVG Demo</h1>
    <img src="https://s3-us-west-2.amazonaws.com/idelog/assets/cultii_logo_final.svg" />
  </body>

我尝试过本地和远程网址来链接.png。我做错了什么?

这是SVG代码:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 257 74" enable-background="new 0 0 257 74" xml:space="preserve">
<g id="idolore_x5F_icon.psd_1_">

        <image overflow="visible" width="287" height="274" id="Layer_1_2_" xlink:href="https://s3-us-west-2.amazonaws.com/idelog/assets/EDEE15BD15B895E0.png"  transform="matrix(0.2254 0 0 0.2254 6.3 6.1153)">
    </image>
</g>
<text transform="matrix(1 0 0 1 78 58)" font-family="'Lora-Bold'" font-size="67">cultii</text>
</svg>

3 个答案:

答案 0 :(得分:2)

您可以将png嵌入SVG中。该文件稍微大一点,但你得到一(1)个httprequest更少(并且只维护一个图像文件)。

Src:Does SVG support embedding of bitmap images?

修改

您实际上可以尝试将其与Hasse或Ramis解决方案结合使用。

<强> EDIT2

您可以使用css执行此操作:background-image: url(data:image/svg+xml,...); 但是嵌入式png是否会继续我不能说,虽然它值得一试

答案 1 :(得分:1)

当Chrome显示SVG图片时,它会获取所有链接的文件。

从html文档链接到SVG图像时,它不会获取链接材料。

您可以尝试将SVG代码嵌入到html中,它应该可以在Chrome中运行。

修改 我试图将SVG图像嵌入到SVG图像中时遇到了类似的问题。只要我在Chrome中显示矢量图像,但是将其放在html页面中(&lt; img src =&#34;&#34;&gt;)都没有获取链接文件。当我将图像嵌入到html文件中时,我认为它有用(&lt; svg&gt;&lt; / svg&gt;)。

这可能是安全问题,不允许图像获取外部资源。

答案 2 :(得分:1)

您还可以使用<object>嵌入SVG。的 MDN Documentation

<强> Plunker Demo