Safari에 svg 확장자가있는 Img가 표시되지 않음 (Chrome + Firefox에서 작동)

현재 확장자가 svg 인 이미지 소스에 다음 코드가 있습니다. Chrome 및 Firefox에서 제대로 작동하며 이미지가 Safari에 표시되지 않습니다. "onerror "추가 : +는 크롬에서 일Safari에 svg 확장자가있는 Img가 표시되지 않음 (Chrome + Firefox에서 작동)

<li><object data="/assets/ResnateThickerHome.png" type="image/svg+xml", onclick="home()" , id="homeSquare"><img src="/assets/ResnateLiHome.png"></object></li>

을 다시 :

<li><img src="/assets/ResnateThickerSquare.svg", onerror="/assets/ResnateLiHome.png", onclick="home()", id="homeSquare"></li>

이 때문에 SVG 확장이었다 가정이 유래 질문 (Do I use <img>, <object>, or <embed> for SVG files?)의 조언 아래 시도하고 다음과 같이 코드를 재 작성 Firefox는 지원하지만 Safari는 지원하지 않습니다. 이 질문에 따라 svg 태그에 img와 object를 사용하지 말아야합니까 : Svg with image inside is not showing in safari (나는이 태그가 img가 아닌 svg 폴리곤 용으로 예약되었다는 인상을 받고 있었습니까?)?

출처

2014-03-18 Amir

서버가 올바른 MIME 유형 ('image/svg + xml')을 사용하여 파일을 보냈습니까? 또한'object' 코드는 실제로 SVG 파일을 가리 키지 않습니다. 오히려 PNG가 오타입니다. 귀하의 원고가 올바르게 보이지 않습니다. 이것은 자바 스크립트 이벤트 핸들러이므로'onerror = "this.onerror = null; this.src = 'image.png'"'와 같이 더 자세해야합니다. http://css-tricks.com/using-svg/ –

죄송합니다. 단지 오타입니다. 그리고 실제 코드에서 확장자가 .png.svg라는 것을 깨달았습니다. Safari에서의 혼동을 일으키는 것이 었습니다. (다른 브라우저에서도 작동하는 것은 이상합니다). 링크를 가져 주셔서 감사합니다, 그 전에 이미지 비트에 대한보고 있었지만 onerror 세그먼트를 읽지 않았다고 생각합니다. – Amir

는 버전 UR 사파리를 확인 UR 브라우저 지원은 여전히이

<svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
     <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect> 
     </svg>

출처

2014-03-18 20:25:51

그래, 전에 그 링크를 확인해 봤는데, 사파리 7.0에있어 문제가 있어서는 안된다. 오류가 발생하는 이유는 src와 svg를 가진 img이기 때문에 궁금하다. "순수한 "svg. – Amir

사각형에 게시 한 svg 코드가 Safari에서 정상적으로 작동하므로 img + svg가 작동하지 않는 이유가 혼란 스럽습니다. – Amir

오류가 다운 된 때 오류 경우 내가 유래에 발견

http://caniuse.com/svg

SVG의 requiremant을 충족하기 위해이 링크를 참조하십시오 파일 확장자가 .png.svg 인 파일을 .svg로 변경하면 Safari에 나타납니다.

출처

2014-03-19 11:22:43 Amir

Safari에 svg 확장자가있는 Img가 표시되지 않음 (Chrome + Firefox에서 작동)

답변

관련 문제