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

이전 질문에 대한 해결책을 갖기 시작했습니다 Overlay SVG diagrams on google map.HTML 코드에 SVG 파일을 임베드 할 때 다른 브라우저에서 동일한 결과를 생성하는 방법은 무엇입니까?

하지만 다른 (작은) 문제가 있습니다. 나는 Firefox 3.5와 Safari 4 (Mac)를 사용하고 있으며, SVG를 XHTML에 임베드 할 때 나는 같은 결과를 얻지 못했다.

나는 <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의 규모는 파이어 폭스와 사파리와 동일하지 않습니다. 내 SVG에서 width, height 및 viewBox이 정의됩니다.

모든 브라우저에서 동일한 결과를 얻을 수있는 방법이 있습니까? (SVG를 지원하지 않는 IE는 신경 쓰지 않습니다. "모든 브라우저"는 적어도 Firefox의 최신 버전을 의미하므로, 오페라 및 사파리) ?? 어쩌면 내가 정의하는 걸 깜박했을거야?

편집 : 나는 또한 :( SVG ??

감사합니다를 포함하는 "표준"방법이 있나요 ... <object>과 함께 SVG 사파리 투명 FF 투명하지만,없는 것으로 나타났습니다 당신의 도움에 대한

출처

2009-07-01 ThibThib

감사합니다. 이것은 svg 파일에 대한 제 크로스 브라우저 지원을 정렬하기 위해로드하는 데 도움이되었습니다. 부끄러움 지원은 더 일관성이 없습니다. –

지나치게, SVG 파일의 브라우저 렌더링의 차이점을 설명하는 또 다른 요소는'letter-spacing' 속성입니다. 현재 Firefox에서는 지원되지 않습니다. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/letter-spacing#Usage_Note –

I만을 얻을 뷰 박스가 SVG에 정의되어 파이어 폭스와 (Windows의 경우) 사파리 사이의 크기가 다른 결과.

해결책은

html의 object 태그에있는 width 및 height 속성을 절대 값 (픽셀)으로 설정합니다.
svg 파일의 너비 및 높이 속성을 상대 값 (예 : 100 %)

그런 다음 FF와 Safari는 동일한 동작을 보여줍니다! 이 상황이 귀하의 상황에 해당 할 경우이 방법을 시도해야합니다.

편집 : 새로운 질문에 관해서는 : - 사파리 투명성 버그 것 같다 : bugs Webkit - 내장 표준 방법 : I 표준 방법이라고 생각하지 않습니다. 당신은 개체, iframe, img 또는 svg (인라인 선언)를 사용할 수 있습니다.

모든 브라우저에서 작동 시키려면 브라우저 스니핑을 사용하고 브라우저에 따라 object 또는 img 태그를 사용해야합니다. 또는 iframe을 사용해보십시오. 그들이 사파리와 파이어 폭스에서 투명한 배경을 가지고 있기로되어 있기 때문입니다. 당신이 여기에서 볼 수 있듯이, 큰 문제가 경우 Webdev 브라우저 지원에 항상 같이

을 (그러나 오페라 모르는) : svg support

(이미지를 클릭하면 자세히 SVG의 기능을 확인하실 수 있습니다)

출처

2009-07-02 05:55:40

감사합니다. 작동합니다. 하지만 투명성에 대해? SVG 아래에 무언가를 넣으면 Safari에는 흰색 배경이 있지만 FF에는 그렇지 않습니다. 그리고 요소를 사용하여 SVG를 임베드하는 경우 배경없이 Safari에서 작동하지만 FF로는 작동하지 않습니다 (GGroundOverlay가 FF에서 작동하지 않는 이유이며 을 사용하여 SVG를 임베드합니다. 구글 맵 오버레이 SVG에 관한 나의 첫번째 질문) – ThibThib

는 당신에게 투명성 문제에 관한 약간의 힌트를 주었다. 이 문제를 해결할 수 있는지 말해주세요. –

Ok 답장을 보내 주셔서 감사합니다. 브라우저에 따라 태그를 선택하겠습니다. 링크 (및 웹킷 버그)를 가리켜 주셔서 감사합니다! – ThibThib

svgweb을 SVG의 IE 렌더링에 사용하는 경우 대부분의 브라우저에서 동일한 동작을 얻을 수 있습니다. 이것은 SVG가 대화 형이 아니며 (자바 스크립트 포함), 그렇지 않으면 모든 브라우저에 임베디드되어야한다고 가정합니다.

<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>

출처

2011-09-23 09:18:49 Martin

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

답변

관련 문제