SVG <image> 未显示在 iPhone 上

Question

所以我试图将图像 (rocket.svg) 链接到我的 svg 但是当我将它嵌入到我的网站时 svg 显示而不是 Rocket.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" style="position:fixed; top:0;      left:0; height:100%; width:100%; user-select: none;">
   <rect style="fill:#33425B;" width="100%" height="100%" id="background"/>

    <!-- Rocket -->
    <image xlink:href="rocket.svg" x="15%" y="45%" width="10vw" height="10vw" id="rocket"/>
</svg>

Answer 1

使用vw高度和宽度属性是导致问题的原因，更改它是有效的：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" style="position:fixed; top:0;      left:0; height:100%; width:100%; user-select: none;">
  <rect style="fill:#33425B;" width="100%" height="100%" id="background"/>
  <image x="0" y="0" width="100%" height="100%" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/a3/NASA_Worm_logo.svg" id="tiger" />
</svg>

Answer 2

只是将其发布给将来遇到类似问题的人。我非常业余，正在将 elementor 与 wordpress 一起使用，并且在苹果设备上显示我的 SVG 时遇到问题。我找到了以下工具，它解决了我的问题！

https://jakearchibald.github.io/svgomg/