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

只需将其发布给有类似问题的未来人们。我非常业余，并且在wordpress中使用elementor时，我的SVG在苹果设备上显示时出现问题。我发现以下工具可以解决我的问题！

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

SVG <img/>未显示在iPhone上

2 个答案: