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

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

为什么你还在使用SVG？您SVG的<image标记表示您正在尝试绘制PNG图片。（xlink:href="data:img/png;base64,）

我只是尝试导出此PNG图片并加载PNG。如果你想要一个可扩展的“播放图标”，我建议你尝试将SVG重新绘制为合适的矢量图像。（系）

Answer 2

同意Ramon您的用例是您正在使用SVG“环绕”光栅图像（Base64编码），因此对于此用例来说最简单的方法是使用普通的img标记。

现在和SVG一样 - 你需要与你分享实际的Ionic 3模板代码，以及你是如何尝试渲染它的。

这里最有可能的问题是SVG标签在你的代码中没有使用svg预标签，而Angular很难理解它是svg：基本上应该是代替等等

SVG未在Ionic 3中渲染

2 个答案: