Question

我正在尝试显示这个简单的嵌入式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没有。有什么遗失的吗？

感谢您的帮助！

Answer 1

实际上支持它:)你有两个选择 - 旧的，使用xhtml，新的，使用html5和现代浏览器与html5解析器：

xhtml示例（适用于大多数浏览器，包括安装了Adobe插件的旧IE）：

<?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示例（IE9，FF4和Chrome支持atm，不久将来推出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>

Answer 2

您需要一个HTML5解析器才能正确显示，例如Firefox 4或Opera 11.50。查看caniuse.com了解更多浏览器详情。

您可以将XHTML与内联svg一起使用，它可以在所有支持svg的浏览器中使用，请参阅here以获取示例。

Answer 3

According to this site, you do have some options.。虽然我个人也在努力解决这个问题......

“包含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并不容易..

Answer 4

好吧，我找到了原因：大多数浏览器都不支持在html中直接嵌入svg标签。

Answer 5

当然，Firefox有一个安全块。如果您使用PHP，这很容易实现。只需包含您的图像。

这么容易。

＆＃13;

<?php include "myimage.svg" ?>

＆＃13;

SVG没有在Opera和Firefox中显示，而是Chrome

5 个答案: