HTML 5,内联SVG和SVG DOM的名称空间感知 [英] HTML 5, inline SVG, and namespace awareness for SVG DOM

查看:112
本文介绍了HTML 5,内联SVG和SVG DOM的名称空间感知的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

以下问题令我困惑。我知道它们是相关的,但... ...


  1. 是否可以识别HTML 5名称空间(用于包含SVG /其他XML方言标签)? 如果不是,那么这又如何 -
    $ b


    //stackoverflow.com/questions/6372362/html-5-adding-xml-namespaces\">old 链接,但我完全困惑......因为Mozilla说要动态修改内联SVG,脚本需要完成这种方式 - 最后,怎么可能我动态地修改内联SVG(如果HTML 5不支持名称空间)?


  2. 或者页面需要作为(X)HTML 5?



明细 -

 <!DOCTYPE html> 
< html>
< head>
< meta charset =utf-8>
< title> hello-SVG< / title>
< / head>
< body>
< svg width =200height =200>
< rect x =0y =0width =100height =100fill =blue>< / rect>
< / svg>
< / body>
< / html>

以上代码是渲染 rect (使用SVG)。现在,要使用JavaScript修改SVG,Mozilla建议使用这个API。而我的问题是,如果HTML 5不支持名称空间,那么这样做的意义何在?对于这样的情况,浏览器是否会自动切换到(X)HTML 5?

我读过这个评论,我发现它最接近我正在寻找的答案 -


我猜HTML5 SVG的情况基本上是没有命名空间的SVG获得解析期间添加的命名空间(但之后它就像之前的(X)HTML)。



解决方案

HTML5定义了HTML,XHTML和DOM。

DOM是可识别名称空间的。当您使用DOM方法时,您必须考虑每个元素所在的命名空间,但默认值为HTML( http://www.w3.org/1999/xhtml )命名空间。



HTML和XHTML是通过解析转换为DOM的序列化。



XHTML是可识别名称空间的,XHTML文档根据XML规则应用名称空间,因此所有名称空间必须明确地分配给每个元素。使用XML解析器将XHTML转换为DOM。



HTML也具有名称空间感知功能,但名称空间隐式赋值。使用HTML解析器将HTML转换为DOM,其中知道哪些元素进入了哪个名称空间。也就是说,它知道< div> 进入了 http://www.w3.org/1999/xhtml 命名空间,并且< svg> 进入 http://www.w3.org/2000/svg 命名空间。诸如< script> 之类的元素可以进入 http://www.w3.org/1999/xhtml http://www.w3.org/2000/svg 命名空间,这取决于它们在HTML代码中出现的上下文。
$ b HTML解析器知道 HTML元素 SVG元素 MathML元素无其他。没有选择使用来自其他命名空间的元素,既不隐式也不明确。也就是说, xmlns 属性不起作用。


The following questions are confusing me. I know they are related, but...

  1. Is HTML 5 namespace aware (for including tags of SVG/other XML dialects)?
  2. If it is not, then what about this -

    I have read this old link, but I am totally confused... because Mozilla says "to dynamically modify inline SVG, scripting needs to be done this way" - so finally, how can I dynamically modify inline SVG (if HTML 5 is not namespace aware)?

  3. Or the page needs to be served as (X)HTML 5?


Details -

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello-SVG</title>
</head>
<body>
    <svg width="200" height="200">
        <rect x="0" y="0" width="100" height="100" fill="blue"></rect>
    </svg>
</body>
</html>

The above code is the correct way to render a rect (using SVG) in HTML 5. Now, to modify the SVG using JavaScript, Mozilla recommends using this API. And my question is, what is the point of doing so if HTML 5 is not namespace aware? For such cases do browsers automatically switch to (X)HTML 5?

I read this comment on SO, and I find it closest to the answer I'm looking for -

I guess the HTML 5 SVG situation is basically "SVG without a namespace gets the namespace added during parsing (but after that it's just like (X)HTML before)".

解决方案

HTML5 defines HTML, XHTML and the DOM.

The DOM is namespace aware. When you use DOM methods you must take into account which namespace each element is in, but the default is the HTML (http://www.w3.org/1999/xhtml) namespace.

HTML and XHTML are serializations that are converted into DOMs by parsing.

XHTML is namespace aware and XHTML documents apply namespaces according to the rules of XML, so all namespaces must be assigned to each element explicitly. XHTML is converted to a DOM using an XML parser.

HTML is also namespace aware, but namespaces are assigned implicitly. HTML is converted to a DOM using an HTML parser, which knows which elements go in which namespace. That is, it knows that <div> goes in the http://www.w3.org/1999/xhtml namespace and that <svg> goes in the http://www.w3.org/2000/svg namespace. Elements like <script> can go in either the http://www.w3.org/1999/xhtml or the http://www.w3.org/2000/svg namespace depending on the context in which they appear in the HTML code.

The HTML parser knows about HTML elements, SVG elements, and MathML elements and no others. There is no option to use elements from other namespaces, neither implicitly nor explicitly. That is, xmlns attributes have no effect.

这篇关于HTML 5,内联SVG和SVG DOM的名称空间感知的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆