Question

有人可以告诉我为什么这个文档没有在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>

Answer 1

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名称空间前缀。

Answer 2

调整代码，从圆圈中删除svg 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>

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

2 个答案: