SVG 未在 Opera 和 Firefox 中显示，但在 Chrome 中显示
Posted
技术标签:
【中文标题】SVG 未在 Opera 和 Firefox 中显示，但在 Chrome 中显示【英文标题】：SVG not showing in Opera and Firefox, but Chrome 【发布时间】：2011-07-18 09:23:27 【问题描述】：我正在尝试显示这个简单的嵌入式 SVG 图像：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg 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- stroke="#000000" fill="#000000">test</text>
</g>
</svg>
</body>
</html>
Chrome 显示它，但 Opera 和 Firefox 没有。有什么遗漏吗？
【问题讨论】：
【参考方案1】：嗯，我找到了原因：大多数浏览器还不支持直接在 HTML 中嵌入 SVG 标签。
【讨论】：
【参考方案2】：您需要一个 HTML5 解析器才能正确显示它，例如Firefox 4，或Opera 11.50。查看caniuse.com 了解更多浏览器详情。
您可以将 XHTML 与内联 SVG 图像一起使用，但它适用于所有支持 SVG 的浏览器。示例见here。
【讨论】：
【参考方案3】：事实上，它是受支持的 :) 你有两个选择——旧的一个，使用 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" >
<svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-/>
</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>
【讨论】：
如果 SVG 在文件中，而不是嵌入，在这种情况下的语法是什么？【参考方案4】：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"
id="svg1341">
<defs id="defs1343" />
<g id="layer1">
<rect
x="30" y="30"
style="fill:#0000ff;
fill-opacity:0.75;
stroke:#000000 stroke-width:1px"
id="rect1353" />
</g>
</svg>
</body>
</html>
祝你好运...成为 SVG 并不容易...
【讨论】：
以上是关于SVG 未在 Opera 和 Firefox 中显示，但在 Chrome 中显示的主要内容，如果未能解决你的问题，请参考以下文章
在 180º firefox 和 opera 中旋转 svg matrix3d 变换 是