라이브러리 요소가있는 외부 SVG 파일의 SVG 요소를 참조하는 인라인 SVG가있는 HTML 파일이 있습니다. 그것은 xlink:href="Library.svg#libraryShapeID"와 함께 <use> 요소를 사용합니다. 그것은 Opera와 Firefox에서 바람으로 작동하지만 Safari에서는 작동하지 않습니다. 여기 간단한 테스트 파일했습니다 :Safari에서 외부 파일을 참조하는 SVG 요소를 사용할 수 없습니다.
http://sasq.comyr.com/Stuff/SVG/test01.html
가 일부 브라우저의 버그 또는 뭔가 잘못하고있는 중이 야? Safari에서 제대로 작동하려면 어떻게 다시 작성해야합니까?
bug about this on Webkit이 있었지만 버전 : 420+에서 수정되었지만 Fragment identifier의 버그는 아직 해결되지 않았습니다.
누군가가 대답을주었습니다 : Importing external SVG (with WebKit) XMLHttpRequest를 사용합니다. 꽤 불행하지만 그 사이에, 나는 일하는 것 같다.
나는 이것이 오래된 질문이라는 것을 알고 있습니다. 그러나 SVG를 사용하는이 방법이 요즘 인기를 얻고 있으므로이 기술을 기본적으로 외부 SVG를로드하지 못하는 브라우저에서 작동 시키려면 polyfill을 작성했습니다. 이 글을 쓰는 시점에서 IE9 +는 사용 요소에서 외부 SVG를 참조하는 것을 지원하지 않습니다. 필자가 작성한 polyfill은 매우 간단하고 가벼운 것입니다. SVG가로드에 실패했는지 여부를 감지하고, 실패한 경우 SVG로드를 가져 오는 GET 요청을 보냅니다. 그런 다음 몸에 붙여줍니다.
유용하게 사용하시기 바랍니다. 나는 어떤 의견을 주셔서 감사합니다.
현재 Safari에이 버그가 있습니까? 나는 버전 5.1.7 (6534.57.2)에 있는데, 여전히 문제가있는 것 같다. – supertrue
@supertrue 내가 말한 것처럼 버그 65344 - 외부 URL 참조 작업을 계속 열 수 있습니다. – karlcow