在Ionic 3中未渲染SVG

Question

我在我的Ionic应用程序上渲染SVG图像时遇到了一些问题。我使用的是用Adobe Photoshop生成的SVG文件，这些文件在我的浏览器上渲染得很完美。然而，它们不会出现在我的应用程序中(这不是路径的问题--找到了一个图像，但没有显示任何内容)。我检查了网上随机找到的一张SVG图片，它看起来很好。

下面是我的SVG文件的内容。我不确定这里会有什么问题。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="66" height="95" viewBox="0 0 66 95">
  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        ">
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""/>
   </rdf:RDF>
</x:xmpmeta>

<?xpacket end="w"?></metadata>
<image id="Objet_dynamique_vectoriel_copie_36" data-name="Objet dynamique vectoriel copie 36" width="66" height="95" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABfCAMAAABrwuGfAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABp1BMVEUAAAA9Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk49Nk4AAAAYQWY0AAAAi3RSTlMAHZPi+spyCULv2SfzVbiQBivHHHzsRv6AAuC6FPfjOW+rDS31XpoIzSJOiQPBGOg//XgBshHfM/hnogvUVpHIR+T7cKza9l+bziNPigQZQD1lu+4QWvloNrYSe+lDxBqN8VHQJJ1h2y6tD+U7vBaDSR6U9FnVKaVpNbV6w4vwYNcOpHFQOjiCSt0bJ6Z5DAAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhBxoPCyhBVT9gAAACHElEQVRYw6XY+zdUURQH8I3xmEdMxDCahJDnNEhFwkQeNcig0mM0kkclJc+URy/6/tNkaTHjXvec+/3+fj9r3bXO2XufLSKSkpoGR3pGpthOlhNHcbntCm4PjuO5YJPIxklyvHaEizid3DwbxKUEAvkF3H/8i6+wSJfwIznFlzWJwBkCV0r0CBjEcZUmgNIymoCrnCZwrYImgMoqmsD1apqAs4YmgNo6mkB9A00geIMmEGpsYgmg+SZNoOUWTeD2HZoAWttoAnfdNAFPO00A97w0gY4UmkB+J00ctog6ljBsEboEukpoAuH7NAF0l9EEesppAg96aQLoq6IJ9A/QBJwPaQJ4FKEJ1A/SBIJDNAHHME3A76UJPOaJEZ6I8gR4wsMTuTzRSBPRUZoYY0/n+BP2jvifsjf12QRZL0LPm8iq9eIlWztfxdgKPhkh+8jrONvNpt6wPXU6acegDQTesvPFzCw75czNk7NWOMPoYaEjvHsvwhEfFoQjfB/NnnqqQnRRhCPSPwlJfPYKRyx9EeGI5RUhidU24YjxNbGKhdCybilYEBsT1sK5ROir1XPdighmqQDnEZsxNcGc+BZRFMyI73FVwIyYGlAXjIlp1ZWWGRHY0gGMlpUzGuu9o2wnC907moLsJgLhH0oHMiE/E4SuX9qASNHyKWFkwYYg8tvxH/D9UdnoGWUvenwgF20Ch2modYV8+zl/bX5+ADoE8V56ss/VAAAAAElFTkSuQmCC"/>
</svg>

提前感谢您的帮助！

Answer 1

我不太确定<?xpacket>在你的SVG中做了什么，因为我自己从来没有见过它。

你为什么要用SVG呢？SVG的<image标记表明您正在尝试绘制一幅PNG图片。(xlink:href="data:img/png;base64,)

我将简单地尝试导出此PNG图片并加载PNG。如果你想要一个可伸缩的“播放图标”，我建议尝试将SVG重绘为适当的矢量图像。(行)

Answer 2

同意Ramon的观点，您的用例是使用SVG来“环绕”光栅图像(Base64编码)，所以对于这种用例来说，最简单的用例是使用普通的img标签。

现在，对于SVG -你需要分享你实际的Ionic 3模板代码，以及你试图渲染它的准确程度。

这里最可能的问题是，SVG标签没有在代码中为Angular使用svg前标签，并且Angular很难理解它是svg:基本上应该是而不是etc