SVG 允许在 SVG 内容中的任意位置包含来自外部命名空间的元素。一般来说,SVG 用户代理会在 DOM 中保留未知元素,但会忽略这些未知元素的渲染。(一个显著的例外在 嵌入外部对象类型 中有说明。)
此外,SVG 允许在任何 SVG 元素上使用来自外部命名空间的属性。SVG 用户代理会在 DOM 中保留未知属性,但会忽略这些未知属性。
SVG 包含外部命名空间的能力可用于以下目的
为了说明,商业图形创作应用程序可能希望在 SVG 文档中包含一些私有数据,以便在重新读取时能够正确地重组图表(在本例中为饼图):
<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in" version="1.1"
xmlns = 'https://w3org.cn/2000/svg'>
<defs>
<myapp:piechart xmlns:myapp="http://example.org/myapp"
title="Sales by Region">
<myapp:pieslice label="Northern Region" value="1.23"/>
<myapp:pieslice label="Eastern Region" value="2.53"/>
<myapp:pieslice label="Southern Region" value="3.89"/>
<myapp:pieslice label="Western Region" value="2.04"/>
<!-- Other private data goes here -->
</myapp:piechart>
</defs>
<desc>This chart includes private data in another namespace
</desc>
<!-- In here would be the actual SVG graphics elements which
draw the pie chart -->
</svg>
SVG 的一个目标是提供一种机制,使其它 XML 语言处理器能够在 SVG 绘图的某个区域内进行渲染,而这些渲染结果会受到 SVG 内容树中相应位置当前激活的各种变换和合成参数的影响。一个具体的例子是为使用 CSS 或 XSL 样式化的 XML 内容提供框架,使得能够将动态换行的文本(受 SVG 变换和合成影响)插入到 SVG 内容的中间。另一个例子是将 MathML 表达式嵌入到 SVG 绘图中[MATHML]。
‘foreignObject’ 元素允许包含一个外部命名空间,其图形内容由不同的用户代理绘制。所包含的外部图形内容同样受 SVG 的变换和合成的影响。
‘foreignObject’ 的内容被假定来自不同的命名空间。位于 ‘foreignObject’ 内的任何 SVG 元素都不会被绘制,除非在正确声明了 ‘xmlns’(参见 Namespaces in XML [XML-NS])属性的情况下递归嵌入了一个适当定义的 SVG 子文档。此类情况的一种示例是:一个 SVG 文档片段嵌入到另一个非 SVG 文档片段中,而该非 SVG 文档片段又嵌入到一个 SVG 文档片段中(例如,SVG 文档片段包含一个 XHTML 文档片段,而该 XHTML 文档片段又包含另一个 SVG 文档片段)。
通常,‘foreignObject’ 会与 ‘switch’ 元素以及 ‘requiredExtensions’ 属性一起使用,以便对用户代理的支持进行适当检查,并在用户代理不支持时提供替代渲染方案。
属性定义
这里是一个例子
<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in" version="1.1"
xmlns = 'https://w3org.cn/2000/svg'>
<desc>This example uses the 'switch' element to provide a
fallback graphical representation of an paragraph, if
XMHTML is not supported.</desc>
<!-- The 'switch' element will process the first child element
whose testing attributes evaluate to true.-->
<switch>
<!-- Process the embedded XHTML if the requiredExtensions attribute
evaluates to true (i.e., the user agent supports XHTML
embedded within SVG). -->
<foreignObject width="100" height="50"
requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML">
<!-- XHTML content goes here -->
<body xmlns="https://w3org.cn/1999/xhtml">
<p>Here is a paragraph that requires word wrap</p>
</body>
</foreignObject>
<!-- Else, process the following alternate SVG.
Note that there are no testing attributes on the 'text' element.
If no testing attributes are provided, it is as if there
were testing attributes and they evaluated to true.-->
<text font-size="10" font-family="Verdana">
<tspan x="10" y="10">Here is a paragraph that</tspan>
<tspan x="10" y="20">requires word wrap.</tspan>
</text>
</switch>
</svg>
SVG 用户代理不必支持调用其他任意用户代理来处理嵌入的外部对象类型的能力;然而,所有符合规范的 SVG 用户代理都必须支持 ‘switch’ 元素,并且在其作为 ‘switch’ 元素中的备选项出现时,能够渲染有效的 SVG 元素。
最终,期望商业网页浏览器能够支持 SVG 嵌入使用 CSS 或 XSL 对其内容进行格式化的其他 XML 语法的能力,且生成的 CSS 或 XSL 格式化内容同样受 SVG 变换和合成的约束。目前,这一能力尚非必需。
将外部命名空间用作扩展机制可以提升灵活性,且易于使用 NVDL、RelaxNG 等校验技术进行处理,但通常会破坏 DTD 校验,除非 DTD 明确提供了可扩展的钩子。
SVG DTD 允许在内部 DTD 子集内扩展 SVG 语言。在内部 DTD 子集内,您可以向大多数 SVG 元素添加自定义元素和属性。如果需要进行 DTD 校验,可使用此功能。
DTD 为大多数 SVG 元素定义了扩展实体。例如,‘view’ 元素在 DTD 中的定义如下
<!ENTITY % SVG.view.extra.content "" >
<!ENTITY % SVG.view.element "INCLUDE" >
<![%SVG.view.element;[
<!ENTITY % SVG.view.content
"( %SVG.Description.class; %SVG.view.extra.content; )*"
>
<!ELEMENT %SVG.view.qname; %SVG.view.content; >
<!-- end of SVG.view.element -->]]>
<!ENTITY % SVG.view.attlist "INCLUDE" >
<![%SVG.view.attlist;[
<!ATTLIST %SVG.view.qname;
%SVG.Core.attrib;
%SVG.External.attrib;
viewBox %ViewBoxSpec.datatype; #IMPLIED
preserveAspectRatio %PreserveAspectRatioSpec.datatype; 'xMidYMid meet'
zoomAndPan ( disable | magnify ) 'magnify'
viewTarget CDATA #IMPLIED
>
<!-- end of SVG.view.attlist -->]]>
实体 SVG.view.extra.content 可以在内部 DTD 子集内定义,以向给定文档中的 ‘view’ 元素添加自定义子元素和属性,并且可以使用 <!ATTLIST> 来添加自定义属性。例如,下面的示例为 ‘view’ 元素扩展了一个额外的子元素 ‘customNS:customElement’ 和一个额外的属性 ‘customNS:customAttr’。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"https://w3org.cn/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY % SVG.view.extra.content "| customNS:customElement" >
<!ATTLIST %SVG.view.qname;
xmlns:customNS CDATA #FIXED "http://www.example.org/customNS"
customNS:customAttr CDATA #IMPLIED>
<!ELEMENT customNS:customElement EMPTY>
<!ATTLIST customNS:customElement
xmlns:customNS CDATA #FIXED "http://www.example.org/customNS"
info CDATA #IMPLIED>
]>
<svg xmlns="https://w3org.cn/2000/svg" version="1.1"
width="8cm" height="4cm">
<desc>Extend the 'view' element via the internal DTD subset</desc>
<!-- Presumably, some great graphics would go here. -->
<view viewBox="100 110 20 30" customNS:customAttr="123">
<customNS:customElement info="abc"/>
</view>
</svg>
interface SVGForeignObjectElement : SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable {
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
};