如何在XHTML文档中使用SVG命名空间 [英] How to use svg namespace in xhtml documents
问题描述
有人可以告诉我为什么此文档不能在Chrome上画圆吗?
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>
推荐答案
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元素名称的原因.
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.
您的解决方案是将页面作为XHTML提供，因此将其作为XML处理，从而可以识别名称空间，或者您需要在<svg>元素上为svg名称空间添加默认的名称空间声明(例如上面的我的后一个示例) )，然后您可以删除svg命名空间前缀，同时仍然继续使用svg命名空间.
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.
这篇关于如何在XHTML文档中使用SVG命名空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
