javascript - 带有链接 .png 的 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>

我已尝试使用本地和远程 URL 来链接 .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>

最佳答案

您可以在 SVG 中嵌入 png。文件变得稍大，但您得到的 httprequest 减少了一 (1) 个(并且只需要维护 1 个图像文件)。

来源:Does SVG support embedding of bitmap images?

编辑

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

编辑2

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

关于javascript - 带有链接 .png 的 SVG 不呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33332057/