【问题标题】：iOS does not render SVG images in Ionic 3 projectiOS 不在 Ionic 3 项目中渲染 SVG 图像
【发布时间】：2018-04-21 13:21:19
【问题描述】：

我尝试了https://forum.ionicframework.com 和https://stackoverflow.com 提供的不同解决方案，但都没有为iOS 生成svg 图像。

我使用来自https://thenounproject.com 的 svg 图像，图像在 android 手机和网络浏览器上呈现，但不在 iPhone 上。

我尝试过的解决方案（所有这些都适用于 Android，但不适用于 iPhone）：

1) src="assets/imgs/svg/halal.svg"

2)src="./assets/imgs/svg/halal.svg"

3) 将type="image/svg+xml" 添加到标签

4) 将background-color: transparent; 添加到标签样式

任何适用于 iPhone 的解决方案？

更新

<ion-col col-3 text-center><img type="image/svg+xml" src="./assets/imgs/svg/parking.svg" style="padding:7px;" /><p style="font-size:11px; ">Parking</p></ion-col>
<ion-col col-3 text-center><img type="image/svg+xml" src="./assets/imgs/svg/wheelchair.svg" style="padding:7px; background-color: transparent;" /><p style="font-size:11px; ">Wheelchain</p></ion-col>
<ion-col col-3 text-center><img type="image/svg+xml" src="./assets/imgs/svg/wifi.svg" style="padding:7px;" /><p style="font-size:11px; ">Wifi</p></ion-col>

这就是它在 iPhone 上的样子

【问题讨论】：

请为您的问题提供更多背景信息。一点点代码就可以帮助我们调试问题。
您还需要说明您遇到问题的 iOS 版本。 “IOS”和“Iphones”涵盖的范围很广。
@richbai90 这有帮助吗？
@AndréDion iPhone 6 Plus 和 iPhone 7 Plus。当然，我希望 svg 显示在整个范围内或至少大部分范围内。
那些不是操作系统版本。

标签： angular typescript svg ionic-framework ionic3

【解决方案1】：

已验证这两者都适用于 ionic3 / iOS 11。

home.html

  <object style="max-width: 100%;" type="image/svg+xml" data="./assets/imgs/homer.svg">
    Your browser does not support SVG
  </object>
  <img style="max-width: 100%;" src="./assets/imgs/homer.svg"/>

【讨论】：

对我来说（ionic 3.9.2）后面的选项（img 标签）不起作用。

【解决方案2】：

我强烈建议使用property binding 而不是interpolation。也不要使用inline styles。它会降低应用程序的性能（因为内联样式没有缓存）并且很难维护代码。

工作stackblitz

myImage='./assets/imgs/svg/parking.svg';

html

<ion-col col-3><img type="image/svg+xml" [src]="myImage"/></ion-col>

【讨论】：

我得到Cannot read property 'svg' of undefined 并且它在. 意外模板错误"./assets/imgs/svg/parking.svg" 上给出错误
我需要对 src 属性绑定（打字稿文件）做些什么吗，为什么我首先要有那个？
这适用于简单的图像吗？试试看。如果可能，我们总是尝试使用属性绑定。这是 Ionic 团队推荐的。
如果我添加 DOT 则不会出现相同的错误，如果我使用 assets/imgs/abc.png 则 dot 是问题，然后 png 是问题。我以前从未对图像使用属性绑定。我想念一些图书馆吗？
嘿 - 你能分享这些 SVG 的内部吗？比如你那里有外部资源的链接等等。问题可能是 SVG 图像本身。尝试在非离子 html 中使用这些 SVG，看看是否可以在 Safari 中渲染它们

【解决方案3】：

问题可能是您尝试渲染的 SVG 包含大量阻止正常渲染的元数据细节。在这里尝试更清洁的版本：

删除了非标准的 xlmns 链接
已删除元数据
添加了 width="100%" 和 height="100%"

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 125">
  <g>
    <path d="M53.585,18.319L56.849,2H37.233l3.263,16.319H53.585z M54.869,3.622l-2.615,13.075H41.827L39.211,3.622H54.869z"/>
    <path d="M61.738,56.868l3.878-3.879l-11.9-32.728l-0.067-0.625H40.432l-5.955,56.574l-0.028,0.261l12.593,22.036L59.502,76.7   l0.131-0.228l-3.242-30.8l1.667,7.516L61.738,56.868z M47.041,95.238L36.117,76.121l5.775-54.862h10.217l5.856,54.862   L47.041,95.238z"/>
  </g>
</svg>

【讨论】：