logo标签列表

如何在XHTML文档中使用SVG命名空间

htmlxmlsvgxhtmlxml-namespaces
4

有人能告诉我为什么这个文档在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>
3
如果以“*.xhtml”命名，对我来说没问题。如果在Web服务器上无法正常工作，请检查文档是否使用XML的MIME类型进行服务。 - Erik Dahlström
一样的情况。在XHTML文件中可以工作，但在HTML文件中无法工作。Mozilla也是如此。 - Mr Lister
2个回答
7

HTML5是唯一支持内联SVG代码的HTML版本。在HTML5之前的版本不支持<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元素名称。

您的解决方案是将页面作为XHTML提供，这样它将被处理为XML，从而具有命名空间感知功能；或者您需要在SVG命名空间上添加<svg>元素的默认命名空间声明（例如上面的后者示例），然后您可以删除SVG命名空间前缀，同时继续使用SVG命名空间。

0
修改了代码，从圆形中删除了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>
谢谢，但我想继续使用svg命名空间。我知道它可以工作，但是我找不到错误在哪里... - Charles
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接