iOS Chrome 및 Safari에 SVG가 표시되지 않습니까?

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와 같은 프로그램에서 열어 벡터화하는 "이미지 추적"기능을 사용하는 것입니다.