何らかの理由で、Web ページにある SVG の 1 つが 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>