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。修复的解决方案是在Adobe Illustrator等程序中打开它，并使用“跟踪图像”功能对其进行矢量化。

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

2 个答案: