我正在尝试显示此简单的嵌入式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 ± means that there are two
solutions!</p>
</body>
</html>
关于SVG未在Opera和Firefox中显示,但在Chrome中显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5356196/