SVG未在Opera和Firefox中显示,但在Chrome中显示

标签 svg cross-browser

我正在尝试显示此简单的嵌入式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没有显示。缺少什么吗?

最佳答案

实际上,它受支持:)您有两个选择-旧的使用XHTML,新的使用HTML5,以及带有HTML5解析器的现代浏览器:
XHTML示例(适用于大多数浏览器,包括安装了Adobe插件的旧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 &PlusMinus; means that there are two
    solutions!</p>

  </body>
</html>

关于SVG未在Opera和Firefox中显示,但在Chrome中显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5356196/

相关文章:

javascript - 在悬停时更改 span/div 中的 SVG 图标的最简单方法?

javascript - 如何正确地将UTF-8字符视为SVG参数?

Chrome 中的 css 文本阴影

javascript - 跨浏览器打印命令?

css - 如何创建此按钮样式?

javascript - 如何在 Capybara 中对 SVG 元素执行点击事件

svg - 为什么没有散列的 SVG 片段标识符不起作用?

javascript - window.onload 在 Firefox+Greasemonkey 脚本中有效,但在 Chrome 用户脚本中无效?

jquery - 我无法获得 IE7 的正确窗口高度

html - 某些用户看不到 Font Awesome 图标