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