SVG не отображается в Opera и Firefox, но в Chrome - PullRequest
Новая
       24

SVG не отображается в Opera и Firefox, но в Chrome

6 голосов
/ 18 марта 2011

Я пытаюсь отобразить этот простой встроенный svg: 

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_1" y="125" x="141" stroke-width="0" stroke="#000000" fill="#000000">test</text>
 </g>
</svg>
</body>
</html>

Chrome показывает это, Opera и Firefox - нет. Чего-то не хватает?

Спасибо за вашу помощь!

Ответы [ 5 ]

4 голосов
/ 18 марта 2011

На самом деле это поддерживается :) У вас есть два варианта - старый, использующий xhtml, и новый, использующий html5 и современный браузер с парсером html5:

Пример xhtml (работает в большинстве браузеров, включая старый IE с установленным плагином Adobe): 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
  <head>
    <title>SVG embedded inline in XHTML</title>
  </head>
  <body>

    <h1>SVG embedded inline in XHTML</h1>

    <object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"> </object>
    <?import namespace="svg" urn="http://www.w3.org/2000/svg" implementation="#AdobeSVG"?>

    <svg:svg version="1.1" baseProfile="full" width="300px" height="200px">
      <svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/>
    </svg:svg>

  </body>
</html>

Пример html5 (atm поддерживается IE9, FF4 и Chrome, Safari в ближайшем будущем): 

<!DOCTYPE html>
<html>
<head>
<title>SVG in text/html</title>
</head>
<body>
<h1>SVG in text/html</h1>
<p><svg height=86 width=90 viewBox='5 9 90 86' style='float: left;'>
  <path stroke=#F53F0C stroke-width=10 fill=#F5C60C stroke-linejoin=round d='M 10,90 L 90,90 L 50,14 Z'/>
  <line stroke=black stroke-width=10 stroke-linecap=round x1=50 x2=50 y1=45 y2=75 />
</svg><b>Warning:</b> Remember that &PlusMinus; means that there are two 
solutions!</p>

</body>
</html>
2 голосов
/ 18 марта 2011

Для этого вам необходим HTML5-анализатор, например Firefox 4 или Opera 11.50 . Проверьте caniuse.com для получения дополнительной информации браузера.

Вы можете использовать XHTML со встроенным svg, и он будет работать во всех браузерах, поддерживающих svg, см. здесь для примера.

0 голосов
/ 06 марта 2017

Конечно, в Firefox есть блок безопасности. Это легко обойти, если вы используете PHP. Просто включите ваше изображение.

Так намного проще. 

<?php include "myimage.svg" ?>
0 голосов
/ 10 июля 2011

Согласно этому сайту, у вас есть несколько вариантов. .хотя я лично с этим тоже борюсь ...

"Простой и легкий способ включить SVG в веб-страницу - это использовать тег объекта XHTML. Вот пример:" 

<?xml version="1.0"?>     
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>SVG Included with <object> tag in an XHTML File</title>
  </head>
  <body>  <h1>An SVG rectangle (via <object> tag)</h1>

  <object type="image/svg+xml" data="web_square.svg">     
    Browser does not support SVG files!     
  </object>
</body>
</html>

"Включение файла SVG." Image / svg + xml "- это тип MIME включаемого файла. Он должен быть указан."«Текст, который будет отображаться, если браузер не поддерживает SVG. Браузеры должны игнорировать теги, которые они не понимают, тем самым обнажая текст».

Он излагает метод «Использование пространств имен» ....

"Через пространства имен файл SVG можно поместить непосредственно в файл XHTML. Ниже приведен пример очень простого файла XHTML, отображающего синий квадрат. Квадрат был нарисован с помощью Inkscape. (Для ясности,чертеж Inkscape был сохранен как обычный файл SVG, а некоторые неиспользованные атрибуты прямоугольника были удалены.) "

<?xml version="1.0"?>     
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">     
  <head> <title>SVG Embedded into an XHTML File</title>
  </head>
  <body> <h1>An SVG rectangle (via Name spaces)</h1>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"     
   version="1.0"
   width="150"
   height="150"
   id="svg1341">
  <defs   id="defs1343" />
  <g      id="layer1">
    <rect
          width="90"   height="90"
          x="30"       y="30"
          style="fill:#0000ff;
          fill-opacity:0.75;
          stroke:#000000    stroke-width:1px"
          id="rect1353" />
  </g>
</svg>     
</body>
</html>

Удачи ... быть SVG не так просто ...

0 голосов
/ 18 марта 2011

Ну, я нашел причину: прямое встраивание тегов svg в html пока не поддерживается в большинстве браузеров.

...