当前位置： 文江博客话题详情

SVG 在 Opera 和 Firefox 中不显示，但在 Chrome 中显示

发布于 2024-10-23 20:00:05 字数 654 浏览 1 评论 0原文

我正在尝试显示这个简单的嵌入式 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 不显示。是不是少了点什么？

原文

I'm trying to display this simple embedded SVG image:

<!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 shows it, but Opera and Firefox don't. Is there something missing?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

爱冒险 2024-10-30 20:00:05

事实上，它是受支持的 :) 您有两种选择 - 旧的一种，使用 XHTML，新的一种，使用 HTML5 和带有 HTML5 解析器的现代浏览器：

XHTML 示例（适用于大多数浏览器，包括带有 Adob​​e 的旧 Internet Explorer）已安装插件）：

<?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、Safari近期将支持atm）：

<!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 ± means that there are two
    solutions!</p>

  </body>
</html>

It is supported, in fact :) You have two options - old one, using XHTML, and new one, using HTML5 and a modern browser with an HTML5 parser:

XHTML example (works in most browsers, including old Internet Explorer with the Adobe plugin installed):

<?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 example(atm supported by IE9, FF4 and Chrome, Safari in near future):

<!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 ± means that there are two
    solutions!</p>

  </body>
</html>
回复 原文
国际总奸 2024-10-30 20:00:05

您需要一个 HTML5 解析器才能正确显示，例如 Firefox 4 或 Opera 11.50。请访问 caniuse.com 了解更多浏览器详细信息。

您可以将 XHTML 与内联 SVG 图像一起使用，并且它可以在所有支持 SVG 的浏览器中工作。有关示例，请参阅此处。

You need an HTML5 parser for that to get that properly displayed, e.g. Firefox 4, or Opera 11.50. Check out caniuse.com for more browser details.

You can use XHTML with inline SVG images and it will work in all SVG-capable browsers though. See here for an example.

回复 原文
季末如歌 2024-10-30 20:00:05

根据此网站，您确实有一些选择。虽然我个人也为此苦苦挣扎，但......

“一种包含 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 绘图被保存为纯 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 并不容易...

According to this site, you do have some options. Although I personally struggle with this, as well...

"A simple and easy way to include SVG
into a web page is to use the XHTML
object tag. Here is an example:"

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

"Inclusion of SVG file. The "image/svg+xml" is the MIME type of the included file. It must be given."

"Text that will be displayed if a browser does not support SVG. Browsers should ignore tags that they don't understand thereby exposing the text."

He also outlines a method "Using Name Spaces"...

"Through Name Spaces, an SVG file can be placed directly in an XHTML file. Here is an example of a very simple XHTML file that displays a blue square. The square was drawn with Inkscape. (For clarity, the Inkscape drawing was saved as a plain SVG file and some of the unused rectangle attributes were deleted.)"

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

Good luck... being SVG isn't easy...

回复 原文
原来分手还会想你 2024-10-30 20:00:05

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

Well, I found the reason: directly embedding SVG tags in HTML is not supported yet in most browsers.

回复 原文
~没有更多了~

关于作者

几度春秋

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

遂心如意

文章 0 评论 0

5513090242

文章 0 评论 0

巷雨优美回忆

文章 0 评论 0

junpengz2000

文章 0 评论 0

13郎

文章 0 评论 0

qq_xU4RDg

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文