How to produce same result on different browsers when embedding SVG file in HTML code?

前端未结

关注

 2  627

野趣味

I begin to have a solution for my previous question Overlay SVG diagrams on google map.

But I have another (smaller) problem. I am using Firefox 3.5 and Safari 4 (on Mac

相关标签:

2条回答

攒了一身酷

2021-02-08 10:24
I only get different results in size between Firefox and Safari (on Windows) when a viewbox is defined in the svg.

A solution is to
- set the width and height attribute in the object tag in html to absolute values (pixel)
- set the width and height attribute in the svg file to relative values (e.g. 100%)
Then both FF and Safari show the same behaviour! You should try this, if this is applicable to your situation.

EDIT: Concerning your new questions: - Transparency in Safari seems to be a bug: bugs Webkit - Standard way for embedding: I don't think there is a standard way. you can use object, iframe, img or svg (inline declaration).

If you want it to work in every browser, you probably have to use browser sniffing and use object or img tags depending on the browser. Or you should try iframes. as they are supposed to have transparent backgrounds in safari and firefox. (but don't know about opera)

Like always in webdev browser support is the big problem, as you can see here: svg support (when you click the image, you can check for the svg features in detail)
0 讨论(0)
发布评论:

提交评论
- 加载中...

野性不改

2021-02-08 10:24

If you are using svgweb for IE rendering of SVG you can achieve the same behaviour for most browsers. This assumes your SVG is not interactive (contains javascript), oterwise it needs to be embedded for any browser.

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

0 讨论(0)