SVG 未在 iOS Chrome 和 Safari 上显示？

Question

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

这是 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>

以及随附的 SCSS

.footer-logo{
    padding-left: 8em;
    a{
        display: inline-block;
        width: 235px;
        height: 61px;
    }
}

@media screen and (max-width: 1140px){
    footer{

        .footer-logo{
            padding-left: 0;
            margin-top: 2em;
        }
    }
}

编辑：页脚代码

<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>

Answer 1

SVG image tag does not support "src" as an attribute （包括它在内）可能会触发桌面浏览器中的回退行为，这些浏览器试图将其呈现为 HTML <img> 标记。

更新：OP实际上忘记关闭他的<image>标签，但更正了他发布的代码中的错误，所以你再也看不到原来的问题了。这个问题和答案应该被忽略，因为它不再适用于任何目的（可能除了人类学）。

Answer 2

问题是您在该 SVG 中嵌入/编码了 PNG。修复的解决方案是在 Adob​​e Illustrator 之类的程序中打开它，并使用矢量化它的“Trace Image”功能。