HTML 코드에 SVG 파일을 포함시 다른 브라우저에서 동일한 결과를 생성하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/1071328

문제

이전 질문에 대한 해결책이 있기 시작합니다. 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>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top