如何在xhtml文档中使用svg命名空间

Cha*_*les 3 html xml xhtml svg xml-namespaces

有人能告诉我为什么这个文档没有在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>
Run Code Online (Sandbox Code Playgroud)

jas*_*sso 6

HTML5之前的HTML不支持<svg>元素.与所有HTML一样,HTML5不支持名称空间,因此它不了解名称空间前缀.对于HTML解析器,元素
<svg:svg xmlns:svg="http://www.w3.org/2000/svg">
具有不同的元素名称
<svg xmlns="http://www.w3.org/2000/svg">
,这就是HTML(5)仅支持svg内联svg代码的文字元素名称的原因.

您的解决方案是将页面作为XHTML提供,因此它将作为XML处理,因此可以识别名称空间,或者您需要<svg>在svg名称空间的元素上添加默认名称空间声明(如上面的后一个示例)然后您可以删除svg名称空间前缀,同时仍继续使用svg名称空间.