我正在尝试显示这个简单的嵌入式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>
Run Code Online (Sandbox Code Playgroud)
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>
Run Code Online (Sandbox Code Playgroud)
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>
Run Code Online (Sandbox Code Playgroud)