问题
Can someone tell me why this document does not draw a circle on Chrome?
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head></head>
<body>
<svg:svg width="100" height="100">
<svg:circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg:svg>
</body>
</html>
回答1:
HTML prior to HTML5 does not support <svg> element. Like all HTML, HTML5 is not namespace aware and therefore it does not understand namespace prefixes. For a HTML parser, element<svg:svg xmlns:svg="http://www.w3.org/2000/svg">
has different element name than<svg xmlns="http://www.w3.org/2000/svg">
and that is why HTML(5) only supports literal svg element name for inline svg code.
Your solution is to either serve the page as XHTML, so it will be processed as XML and thus namespace aware, or you need to add a default namespace declaration on <svg> element for the svg namespace (like my latter example above) and then you can remove the svg namespace prefix while still continuing to use the svg namespace.
回答2:
tweaked the code, removed the svg from circle and http://jsfiddle.net/CLEZc/1/
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
来源：https://stackoverflow.com/questions/22806022/how-to-use-svg-namespace-in-xhtml-documents