Вопрос по html, svg – Как получить одинаковый результат в разных браузерах при встраивании SVG-файла в HTML-код?

10

Я начинаю иметь решение для моего предыдущего вопросаНаложение SVG-диаграмм на карту Google.

Но у меня есть другая (меньшая) проблема. Я использую 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 не совпадают с Firefox и Safari. В моем SVGwidth, height а такжеviewBox определены.

Есть ли способ получить один и тот же результат со всеми браузерами (меня не волнует IE, который не поддерживает SVG ..., так что "все браузеры" означают, по крайней мере, последние версии Firefox, Opera и Safari ) ?? Может быть, я что-то забыл определить?

РЕДАКТИРОВАТЬ: я также заметил, что с<object>, SVG прозрачен с FF, но не прозрачен с Safari ... :( Существует ли «стандарт»? способ включить SVG ??

Спасибо за помощь

Спасибо за вопрос. Это помогло мне разобраться в моей кросс-браузерной поддержке файлов SVG. Поддержка стыда не более последовательна. Richard Garside
Попутно, еще один фактор, который может объяснить различия в рендеринге SVG-файлов в браузере, этоletter-spacing приписывать. В настоящее время он не поддерживается в Firefox, см.developer.mozilla.org/en-US/docs/Web/SVG/Attribute/… Fabien Snauwaert

Ваш Ответ

2   ответа
6

ws), когда в svg определен viewbox.

Решение состоит в том, чтобы

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

Тогда и FF, и Safari показывают одинаковое поведение! Вы должны попробовать это, если это применимо к вашей ситуации.

РЕДАКТИРОВАТЬ: Относительно ваших новых вопросов:  - Прозрачность в Safari кажется ошибкой:ошибки Webkit  - Стандартный способ встраивания: я не думаю, что существует стандартный способ. Вы можете использовать object, iframe, img или svg (встроенное объявление).

Если вы хотите, чтобы он работал в каждом браузере, вам, вероятно, придется использовать сниффинг в браузере и использовать теги object или img в зависимости от браузера. Или вы должны попробовать iframes. поскольку они должны иметь прозрачный фон в сафари и файрфоксе. (но не знаю об опере)

Как всегда в браузере webdev, большая проблема, как вы можете видеть здесь:поддержка SVG (когда вы нажимаете на изображение, вы можете детально проверить функции svg)

Спасибо, это работает. Но насчет прозрачности? Если вы поместите что-нибудь под SVG, то в Safari есть белый фон, но не в FF. И если я использую & lt; img & gt; элемент для встраивания моего SVG, он работает (без фона) с Safari, но не с FF (вот почему GGroundOverlay не работает с FF, он использует & lt; IMG & gt; для встраивания SVG - см. мой первый вопрос по оверлею SVG с гугл картой) ThibThib
дал вам несколько советов по поводу прозрачности. Скажите, если вы можете решить эту проблему ..
OMG устанавливает атрибуты with и height в файле svg на относительные значения (например, 100%). Я искал несколько часов .... Спасибо !!!
Хорошо, спасибо за все эти ответы. Я, вероятно, выберу тег в зависимости от браузера. Спасибо за указание ссылок (и ошибка webkit)! ThibThib
0

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>

Похожие вопросы