How to use svg namespace in xhtml documents

StackOverflow https://stackoverflow.com/questions/22806022

题

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>
有帮助吗？

解决方案

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.

其他提示

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>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top