HTML 코드에 SVG 파일을 포함시 다른 브라우저에서 동일한 결과를 생성하는 방법은 무엇입니까?
문제
이전 질문에 대한 해결책이 있기 시작합니다. Google지도에서 SVG 다이어그램 오버레이.
그러나 나는 또 다른 (작은) 문제가 있습니다. 나는 Firefox 3.5와 Safari 4 (Mac)를 사용하고 있으며 XHTML에 SVG를 포함시킬 때 전혀 같은 결과가 없습니다.
나는 그것을 사용할 수있다 <object>
아니면 그 <embedded>
요소 (그러나 마지막 것은 더 이상 사용되지 않는다고 생각합니다). 나는 그것들을 사용합니다.
<div id="map_canvas" style="width: 900px; height: 900px">
<object data="test.svg" width="100%" height="100%" type="image/svg+xml"/>
</div>
SVG의 크기와 스케일은 Firefox 및 Safari와 동일하지 않습니다. 내 svg에서 width
, height
그리고 viewBox
정의됩니다.
모든 브라우저와 동일한 결과를 얻을 수있는 방법이 있습니까 (SVG를 지원하지 않는 IE에 대해 신경 쓰지 않으므로 "모든 브라우저"는 최소한 최신 버전의 Firefox, Opera 및 Safari를 의미합니다). ?? 내가 정의하는 것을 잊어 버린 것일까 요?
편집 : 나는 또한 그것을 알아 차렸다 <object>
, SVG는 FF로 투명하지만 사파리로 투명하지는 않습니다 ... :( SVG를 포함시키는 "표준"방법이 있습니까 ??
도와 주셔서 감사합니다
해결책
SVG에 뷰 박스가 정의 될 때 Firefox와 Safari (Windows) 사이에 크기가 다른 결과를 얻습니다.
해결책은해야합니다
- HTML의 객체 태그의 너비와 높이 속성을 절대 값 (픽셀)으로 설정하십시오.
- SVG 파일의 너비와 높이 속성을 상대 값으로 설정하십시오 (예 : 100%)
그런 다음 FF와 Safari는 모두 동일한 행동을 보여줍니다! 이것이 당신의 상황에 적용 할 수 있다면 이것을 시도해야합니다.
편집 : 새로운 질문과 관련하여 : - 사파리의 투명성은 버그 인 것 같습니다. 버그 webkit- 임베딩의 표준 방법 : 표준 방법이 없다고 생각합니다. Object, Iframe, IMG 또는 SVG (인라인 선언)를 사용할 수 있습니다.
모든 브라우저에서 작동하려면 브라우저 스니핑을 사용하고 브라우저에 따라 개체 또는 IMG 태그를 사용해야 할 것입니다. 또는 iframes를 시도해야합니다. 사파리와 파이어 폭스에서 투명한 배경을 가져야합니다. (하지만 오페라에 대해 모른다)
WebDev 브라우저에서 항상 그렇듯이 여기에서 볼 수 있듯이 큰 문제입니다. SVG 지원 (이미지를 클릭하면 SVG 기능을 자세히 확인할 수 있습니다)
다른 팁
사용중인 경우 svgweb IE SVG 렌더링의 경우 대부분의 브라우저에서 동일한 동작을 달성 할 수 있습니다. 이것은 귀하의 SVG가 대화식 (JavaScript 포함)이 아니라고 가정합니다.
<html>
<head>
<!--[if IE]>--><script type="text/javascript" src="javascripts/svg/svg.js"></script><!--<![endif]-->
</head>
<body>
<div id="map_canvas" style="width: 900px; height: 900px">
<!--[if !IE]>--><img src="test.svg" width="900" height="900" /><!--<![endif]-->
<!--[if lt IE 9]><object src="test.svg" classid="image/svg+xml" width="900" height="900"></object><![endif]-->
<!--[if gte IE 9]><object data="test.svg" type="image/svg+xml" width="900" height="900"></object><![endif]-->
</div>
</body>
</html>