SVG没有在iOS Chrome和Safari上显示？

由于某些原因，我网页中的一个SVG无法在iOS Chrome或iOS Safari上呈现。我用于主徽标的另一个SVG呈现得非常好，它们使用与文件名/路径完全相同的代码栏。元素在inspector中具有正确的大小和宽度，但图像本身不存在。在普通浏览器中，即使缩小到类似移动设备的分辨率，它也能很好地渲染

下面是SVG的代码

 <div class="col-2 footer-logo">
     <a href="#" title="foo">
         <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 235 61">
              <image xlink:href="img/footer_logo.svg" src="img/footer_logo.png"      width="234" height="60"/>
         </svg>
     </a>
  </div>

编辑：页脚代码

<footer class="col-4">
        <div class="container">
            <nav class="col-4 inner-footer">
                <div class="col-1 footer-links">
                    <h4>foo</h4>
                    <ul>
                        <li><a href="#">foo?</a></li>
                        <li><a href="#">foo?</a></li>
                        <li><a href="#">foo?</a></li>
                        <li><a href="#">foo?</a></li>
                    </ul>
                </div>
                <div class="col-1 footer-links">
                    <h4>foo</h4>
                    <ul>
                        <li><a href="#">foo</a></li>
                        <li><a href="#">foo</a></li>
                        <li><a href="#">foo</a></li>
                    </ul>
                </div>
                <div class="col-1 footer-links">
                    <h4>foo</h4>
                    <ul>
                        <li><a href="#">foo</a></li>
                        <li><a href="#">foo</a></li>
                    </ul>
                </div>
                <div class="col-1 footer-links">
                    <h4>foo</h4>
                    <ul>
                        <li><a href="#">foo</a></li>
                        <li><a href="#">foo</a></li>
                        <li><a href="#">foo</a></li>
                    </ul>
                </div>
            </nav>
            <hr class="col-4">
            <div class="col-2 copyright">
                <p>foo.</p>
                <p><a href="#">foo</p>
            </div>
            <div class="col-2 footer-logo">
                <a href="#" title="foo">
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 235 61">
                        <image xlink:href="img/footer_logo.svg" src="img/footer_logo.png" width="234" height="60"/>
                    </svg>
                </a>
            </div>
        </div>
    </footer>

福






福





福




福






福

和包括这一点可能会触发桌面浏览器中的回退行为，这些浏览器试图将其呈现为HTML

标记

---

更新：OP实际上忘记了关闭他的

标签，但更正了他发布的代码中的错误，因此您无法再看到原来的问题。这个问题和答案应该被忽略，因为它不再适用于任何目的（也许人类学除外）。

问题是您在SVG中嵌入了PNG/编码。解决方法是在Adobe Illustrator之类的程序中打开它，并使用“跟踪图像”功能对其进行矢量化。

您是否查看了此链接@Blisskarthik是的，我有，然而，标题中的另一个SVG使用了完全相同的标记等，显示得很好：/Chris Coyier的这篇文章指出，这是一种用于回退的有用技术。我在站点上的每个SVG上都使用了相同的技术，为什么只有这一个会引起抖动感谢您花时间尝试和帮助：）嗯……显然不是这样：）您可以发布SVG图像的源代码，看看源代码中是否有奇怪的地方吗？源代码在原始问题中提供，除非您指的是JSFIDLE中的实时版本？：）我指的是footer.svg的来源-可能是图像内容中的某些内容导致了问题您为什么将Michael的答案标记为解决方案&然后声明它没有解决您的问题？这似乎仍然是一个未解决的问题。嗨，这不是答案，它在结尾缺少了一个尾随，而不仅仅是/>。正如CSS技巧所展示的那样，.PNG是一种后备方法。感谢您抽出时间来尝试和帮助！：）哦，我明白了。我的缺点是，我有一个类似的问题，这就是我的解决方案。很高兴知道撤退。

<footer class="col-4">
        <div class="container">
            <nav class="col-4 inner-footer">
                <div class="col-1 footer-links">
                    <h4>foo</h4>
                    <ul>
                        <li><a href="#">foo?</a></li>
                        <li><a href="#">foo?</a></li>
                        <li><a href="#">foo?</a></li>
                        <li><a href="#">foo?</a></li>
                    </ul>
                </div>
                <div class="col-1 footer-links">
                    <h4>foo</h4>
                    <ul>
                        <li><a href="#">foo</a></li>
                        <li><a href="#">foo</a></li>
                        <li><a href="#">foo</a></li>
                    </ul>
                </div>
                <div class="col-1 footer-links">
                    <h4>foo</h4>
                    <ul>
                        <li><a href="#">foo</a></li>
                        <li><a href="#">foo</a></li>
                    </ul>
                </div>
                <div class="col-1 footer-links">
                    <h4>foo</h4>
                    <ul>
                        <li><a href="#">foo</a></li>
                        <li><a href="#">foo</a></li>
                        <li><a href="#">foo</a></li>
                    </ul>
                </div>
            </nav>
            <hr class="col-4">
            <div class="col-2 copyright">
                <p>foo.</p>
                <p><a href="#">foo</p>
            </div>
            <div class="col-2 footer-logo">
                <a href="#" title="foo">
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 235 61">
                        <image xlink:href="img/footer_logo.svg" src="img/footer_logo.png" width="234" height="60"/>
                    </svg>
                </a>
            </div>
        </div>
    </footer>