svg命名空间

注:本文翻译自developer.mozilla.org/en/docs/Web/SVG/Namespaces_Crash_Course 。是在自己的理解的基础上翻译的,如果有疑义可以自己看英文版。

作为XML 的一个方言,SVG 需要在一个命名空间内(is namespaced)。理解命名空间的概念,以及在你打算编辑SVG内容时,命名空间如何使用,是很重要的。SVG查看器的版本早于Firefox 1.5的发布的,都几乎没有注意命名空间的问题,但它们对于支持多XML方言的用户代理(如基于Gecko的浏览器)必不可少,这些浏览器对这些也有非常严格的要求。花一些时间来了解命名空间,它会为您节省各种各样的头痛。

1、背景

W3C的长期目标是使不同类型的基于XML的内容能够在同一个XML文件中混合使用。例如,SVG和MathML可以直接并入基于XHTML的科学文档中。能够混合这些不同的内容类型具有许多优点,但是它还需要解决一个实际的问题。
  自然地,每种XML方言定义其规范中描述的标记标签名称的含义。在单个XML文档中混合来自不同XML方言的内容的问题是由一种方言定义的标记标签可能会有与由另一种方言定义的标记标签相同的名称。例如,XHTML和SVG都有一个<title>标签。用户代理应该如何区分两者?
  事实上,用户代理什么时候能够识别XML内容,而不只是一个包含许多无法识别的标签的XML文件?与大众意见相反,这个问题的答案不是“它可以从DOCTYPE声明”。DTD从未设计过混合内容,过去尝试创建混合内容DTD现在被认为已失败。XML和一些XML方言(包括SVG),不需要DOCTYPE声明,SVG 1.2甚至不会有一个。 DOCTYPE声明(通常)匹配单个内容类型文件中的内容的事实仅仅是巧合的。DTD仅用于验证,而不是内容的识别。用户代理使用其DOCTYPE声明伪装和识别XML内容是没有作用的。
  这个问题的真正答案是,XML内容通过给标签显式的“命名空间声明”告诉用户代理标记名称属于哪个方言。

2、声明命名空间

那么这些命名空间声明是什么样子,声明在哪里?这里是一个简短的例子。

<svg xmlns="http://www.w3.org/2000/svg">
<!-- more tags here -->
</svg>

命名空间声明由xmlns属性提供。此属性表示<svg>标记及其子标记属于名称空间为“http://www.w3.org/2000/svg”的XML方言,当然,它是SVG。注意,命名空间声明只需要在根标记上提供一次。声明定义了默认命名空间,因此用户代理知道所有<svg>标签的后代标签也属于同一命名空间。用户代理检查他们是否属于同一个命名空间,如果是的话才去如何处理命名空间下的标签标记。
  注意,命名空间名称只是字符串,尽管SVG命名空间名称看起来像URI,但这并不重要。URI通常被使用,因为它们是唯一的,目的不是“链接”某处。(事实上​​,URI经常使用,通常使用术语“命名空间URI”而不是“命名空间名称”。)

3、重新声明默认命名空间

因此,如果根标记的所有后代也被定义在默认命名空间中,那么如何混合来自另一个命名空间的内容?简单。您只需重新定义默认命名空间。这里有一个简短的例子。

<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <!-- some XHTML tags here -->
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
    <!-- some SVG tags here -->
    </svg>
  <!-- some XHTML tags here -->
  </body>
</html>

在此示例中,根<html>标签上的xmlns属性将默认名称空间声明为XHTML。因此,除了<svg>标记,用户代理将其及其所有子标记解释为属于XHTML。 <svg>标记具有自己的xmlns属性,通过重新声明默认命名空间,这告诉用户代理,<svg>标记及其后代(除非他们也重新编写默认命名空间)属于SVG。看,命名空间真的不是那么难。

4、声明命名空间前缀

XML方言不仅定义自己的标签,而且定义自己的属性。默认情况下,属性根本没有命名空间,并且只知道是唯一的,因为它们出现在本身具有唯一名称的元素上。然而,有时需要定义属性,使得它们可以在许多不同的元素上重用,并且仍然被认为是相同的属性,与它们所使用的元素无关。一个很好的例子是由XLink规范定义的href属性。此属性通常被其他XML方言用作链接到外部资源的手段。但是如何告诉用户代理该属性属于哪个方言,在这种情况下用“XLink”?请考虑以下示例。

<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
  <script xlink:href="cool-script.js" type="text/ecmascript"/>
</svg>

这个例子有相当不寻常的看起来的属性xmlns:xlink。正如你可能从第一个“xmlns”部分猜到的,这是另一个命名空间声明。然而,这个命名空间声明不是设置默认命名空间,而是设置称为“命名空间前缀”的命名空间。在这种情况下,我们选择使用前缀xlink(第二部分),因为前缀将用于告诉用户代理属于XLink的属性。
  顾名思义,命名空间前缀用于前缀属性名称和标签名称。这是通过在属性名称之前放置命名空间前缀和冒号来实现的,如上例中的<script>标记所示。这告诉用户代理该特定属性属于分配给命名空间前缀(XLink)的命名空间,并且它是可以用于具有相同含义的其他标记上。
  请注意,使用未绑定到命名空间名称前缀是XML错误。尽管xlink:href属性不会导致错误,但上面示例中由xmlns:xlink属性创建的绑定是绝对必要的。这个XLink属性在SVG中经常在<a>,<use>和<image>标签等中使用,所以最好在文档中始终包含XLink声明。
  另外,命名空间前缀也可以用于标记名称。这告诉用户代理,这个特定的标签(但不是它的孩子这一次!)属于分配给前缀的命名空间。知道这些将减少你一些迷惑,如果你遇到了像下面的例子中的标记:

<html xmlns="http://www.w3.org/1999/xhtml" 
  xmlns:svg="http://www.w3.org/2000/svg">
  <body>
    <h1>SVG embedded inline in XHTML</h1>
    <svg:svg width="300px" height="200px">
    <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/>
    </svg:svg>
  </body>
</html>

请注意,因为名称空间前缀用于<svg:svg>标记及其子<svg:circle>,因此无需重新声明默认名称空间。一般来说,最好重新声明默认名称空间,而不是以这种很多前缀标签的方式。

5、声明命名空间前缀使用命名空间XML编写脚本

命名空间不仅影响标记,还影响脚本。如果您编写用于命名空间的XML(如SVG)的脚本,请继续阅读。
  DOM1级别推荐在XML的原始命名空间发布之前创建; 因此,DOM1不是命名空间所识别的。这会导致名称空间的XML(如SVG)出现问题。为了解决这些问题,DOM2级别添加了命名空间的所有适用的DOM1方法。当编写SVG脚本时,使用命名空间能识别的方法很重要。下表列出了不应在SVG中使用的DOM1方法,以及应该使用的等效DOM2对等方法。如下图:

Paste_Image.png

所有DOM2命名空间方法的第一个参数必须是有问题的元素或属性的命名空间名称(也称为命名空间URI)。对于SVG元素,这是“http://www.w3.org/2000/svg”。 但是,请注意:XML 1.1中的命名空间建议指出,没有前缀的属性的命名空间名称没有值。换句话说,虽然属性属于标签的命名空间,但不使用标签的命名空间名称。相反,您必须使用null作为未限定(无前缀)属性的命名空间名称。 因此,要使用document.createElementNS()创建一个SVG rect元素,您必须写:

document.createElementNS('http://www.w3.org/2000/svg', 'rect');

但是要检索SVG rect元素上的x属性的值,必须写:

rect.getAttributeNS(null, 'x');

注意,不是针对具有命名空间前缀的属性(属于与标记不属于同一个XML方言的属性)的情况。诸如xlink:href属性的属性需要分配给该前缀的命名空间名称(对于XLink,请使用http://www.w3.org/1999/xlink)。 因此,要获取SVG中<a>元素的xlink:href属性的值,您应该写:

elt.getAttributeNS('http://www.w3.org/1999/xlink', 'href');

对于设置具有命名空间的属性,建议(但不是必需),您还在第二个参数中包括其前缀,以便以后可以更容易地将DOM转换回XML(如果您想要将其发送回 服务器)。 例如:

elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg');

作为最后一个例子,这里是一个演示如何使用脚本动态创建一个<image>元素:

var SVG_NS = 'http://www.w3.org/2000/svg';
var XLink_NS = 'http://www.w3.org/1999/xlink';
var image = document.createElementNS(SVG_NS, 'image');
image.setAttributeNS(null, 'width', '100');
image.setAttributeNS(null, 'height', '100');
image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png');

6、总结:

确保您始终声明您在XML文件中使用的命名空间。 如果不这样做,Firefox等用户代理将无法识别您的内容,只会显示XML标记或通知用户XML中有错误。 在创建新的SVG文件时,最好使用包含所有常用命名空间声明的模板。 如果你还没有一个,请从下面的代码开始:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>

即使您不在特定文档中使用所有这些命名空间,包含命名空间声明也没有任何危害。 如果你在以后添加来自一个未使用的命名空间的内容,它可以避免一些恼人的错误。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,580评论 18 139
  • 1. XML简介 以下内容来自于http://www.w3school.com.cn/xml 基本知识 XML 和...
    WebSSO阅读 1,889评论 1 7
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,724评论 6 342
  • 经过两天的奋战,终于把xml简略的过了一遍。 1.1XML介绍 xml是Extensible Markup lan...
    Ystrator阅读 801评论 0 2
  • 宝贝,谢谢你来到妈妈身边。从你刚出生妈妈还不是很适应你的存在,到后来,妈妈一刻都不想离开你。妈妈爱你❤!如果你要问...
    静儿JingLen阅读 202评论 0 2