0

何らかの理由で、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>
4

2 に答える 2

1

SVG イメージ タグは属性として「src」をサポートしていません。これを含めると、これを HTML<img>タグとしてレンダリングしようとするデスクトップ ブラウザでフォールバック動作が発生する可能性があります。

更新: OP は実際には<image>タグを閉じるのを忘れていましたが、投稿されたコードの間違いを修正したため、元の問題は表示されなくなりました。この質問と回答は、もはやいかなる目的にも有効ではないため、無視する必要があります (おそらく人類学を除く)。

于 2014-07-09T17:54:28.237 に答える
0

問題は、その SVG 内に PNG が埋め込まれている/エンコードされていることでした。修正する解決策は、Adobe Illustrator などのプログラムでそれを開き、それをベクトル化する「Trace Image」機能を使用することです。

于 2015-03-12T11:21:49.480 に答える