SVG 2 要求: | - 允许在 SVG 中使用 HTML5 元素:音频、画布、iframe 和视频。 |
---|---|
解决方案: | - 允许来自 HTML5 的音频、画布、iframe 和视频元素,不引入几乎相同但略有不同的 SVG 命名空间元素。 |
目的: | 允许各种 HTML 嵌入内容元素直接在 SVG 中使用,并支持动态加载内容。 |
负责人: | 无 |
嵌入内容是指将另一个资源导入文档的内容,或插入文档中的其他词汇内容。 这与HTML的嵌入内容定义相同。
SVG支持通过使用‘image’和‘foreignObject’元素来实现嵌入内容。
此外,SVG还允许使用HTML的'video'、'audio'、'iframe'和'canvas'元素来实现嵌入内容。
除了‘canvas’和‘foreignObject’,嵌入内容与资源提示兼容,用于优先下载外部资源。
x、y、宽度和高度几何属性指定嵌入内容被放置的矩形区域 (定位矩形)。 定位矩形用作元素的边界框; 但请注意,图形可能会溢出定位矩形, 这取决于溢出 属性的值。
HTML命名空间中的元素没有SVG表现属性
用于几何属性。
然而,大多数这些元素接受HTML
width
和height
维度属性,
这些属性被用作表现提示
设置相应的大小属性的默认值。
HTML维度属性必须按照HTML规范中的定义进行解析和解释[HTML]。 特别是,它们只接受整数值,而不接受带单位的CSS长度。 在‘canvas’元素上, 这些属性略有不同: 它们影响渲染的位图,而不仅仅是其布局。
当嵌入内容由单个引用资源组成 (例如,一个‘image’、‘video’或‘canvas’), 定位矩形的维度, 在应用所有变换后的当前坐标系统中, 定义了嵌入对象的指定大小。 必须使用 默认大小算法 确定对象的具体对象大小和最终位置, 该算法针对CSS布局中的替换元素定义[css-images-3]。 object-fit和object-position会影响 对象的最终 位置和大小, 可能导致它超出定位矩形。 在这种情况下,溢出属性决定 渲染的对象是否应裁剪到其定位矩形。
当嵌入内容由文档片段组成 (例如,一个‘foreignObject’、 一个‘audio’或‘video’,具有用户代理 生成的控件, 或一个‘video’、‘audio’或‘canvas’,显示HTML 后备内容), 定位矩形定义了使用CSS布局子内容的 包含块的边界。 包含块的比例在当前坐标系统中定义, 包括所有显式和隐式(例如,‘viewBox’)变换。 使用SVG布局属性定位的‘foreignObject’, 或其他元素, 在CSS布局中隐含地绝对定位。 因此,任何绝对定位的子元素 都是相对于此包含块进行定位的。 同样,溢出属性决定 超出定位矩形的内容是否会被隐藏。
对于宽度或高度, 'auto'值用于根据引用资源的固有维度或固有纵横比自动调整相应元素的大小。 自动调整大小的值的计算遵循 默认大小算法 针对CSS布局中的替换元素定义[css-images-3]。 特别是,当引用资源没有固有大小时 (例如,一个‘iframe’或没有定义尺寸的图像类型), 它的宽度假定为300px,高度假定为150px。
CSS定位属性(例如top和margin)在SVG坐标系统中定位嵌入内容元素时没有效果。 然而,它们可以用于定位‘foreignObject’或HTML嵌入元素的子元素。
‘image’元素 表示完整文件的内容将在当前用户坐标系统中的给定矩形内呈现。‘image’元素可以引用光栅 图像文件,如 PNG 或 JPEG,或 MIME 类型为 "image/svg+xml" 的文件。符合规范的 SVG 查看器 需要支持至少 PNG、JPEG 和 SVG 格式的文件。 如果当前文档支持动画,则 SVG 文件必须在安全动画模式 下处理;如果当前文档是静态的,则必须在安全静态模式 下处理。
处理‘image’的结果始终是四通道 RGBA 结果。当‘image’ 元素引用的图像(如许多 PNG 或 JPEG 文件)仅具有三个通道(RGB)时,效果就像对象被转换为 具有 alpha 通道均匀设置为 1 的 4 通道 RGBA 图像。对于单通道(灰度) 光栅图像,效果就像对象被转换为 4 通道 RGBA 图像,其中引用对象的单通道用于计算三个颜色通道, 并且 alpha 通道均匀设置为 1。
‘preserveAspectRatio’属性 确定引用图像如何缩放和定位,以适应从 具体对象大小和定位矩形 以及object-fit和object-position属性确定的 结果。应用此属性的结果定义了用于实际图像渲染的图像渲染矩形。 当引用的图像为 SVG 时, 图像渲染矩形定义了用于渲染该 SVG 的SVG 视口。
‘preserveAspectRatio’的计算 在确定具体对象大小后应用, 并且仅在该大小与嵌入图像的固有纵横比不匹配时有效。 如果使用的object-fit值 确保具体对象大小与固有纵横比匹配 (即,任何值均不同于默认的fill), 则‘preserveAspectRatio’值将无效; 图像渲染矩形将是使用 CSS 缩放和定位对象时确定的。 因此,‘preserveAspectRatio’属性可以安全地用作 大多数值的object-fit和object-position的回退; 必须明确设置为none以关闭纵横比控制,无论object-fit值如何。
评估‘preserveAspectRatio’属性时使用的纵横比 由引用内容的固有纵横比定义。 对于 SVG 文件,纵横比在SVG 内容的固有尺寸属性中定义。 对于大多数光栅内容(PNG、JPEG),图像文件的像素宽度和高度定义了固有纵横比。 如果嵌入图像没有固有纵横比 (例如,既没有‘viewBox’属性也没有外部 svg 元素的显式维度), 则‘preserveAspectRatio’属性被忽略; 嵌入图像被绘制以填充定位矩形, 该矩形由‘image’元素上的几何属性定义。
例如,如果图像元素引用了 PNG 或 JPEG 并且preserveAspectRatio="xMinYMin meet",则光栅的纵横比将被保留 (这意味着图像坐标到当前用户空间坐标的缩放因子在 X 和 Y 方向上将相同),光栅将尽可能大地缩放, 同时确保整个光栅适合视口,并且光栅的左上角将与视口的左上角对齐,视口由 x、y、 width和height属性定义在 ‘image’元素上。 如果‘preserveAspectRatio’的值为'none',则光栅的纵横比将不被保留。 图像将适合,使得光栅的左上角精确对齐坐标(x、y),光栅的右下角精确对齐坐标(x+width、y+height)。
对于嵌入 SVG 图像的‘image’元素, 引用 SVG 图像中根元素上的‘preserveAspectRatio’属性必须被忽略, 而应视为具有none的值。 (请参见‘preserveAspectRatio’以获取详细信息)。 这确保了引用的‘image’元素上的 ‘preserveAspectRatio’属性 具有其预期效果, 即使它的值是none。
当‘image’元素上的 ‘preserveAspectRatio’属性的值 不是 none时, 从‘image’元素的属性确定的 图像渲染矩形将与嵌入 SVG 的固有纵横比完全匹配。 因此,忽略嵌入 SVG 的‘preserveAspectRatio’属性通常不会有任何效果。 例外情况是,如果该图像的纵横比是由不匹配其‘viewBox’纵横比的宽度和高度属性的绝对值决定的。 这种情况不常见,建议作者避免,原因有很多。
用户代理样式表将‘image’元素上的 overflow属性的值设置为hidden。 除非作者覆盖,否则图像将被裁剪到 由几何属性定义的定位矩形。
对于嵌入 SVG 图像的‘image’元素, 适用两种不同的overflow值。 在‘image’元素上指定的值决定 图像渲染矩形是否被裁剪到定位矩形。 引用 SVG 的根元素上的值决定图形是否被裁剪到图像渲染矩形。
在 SVG 2 中新增。 以前版本的 SVG 要求忽略嵌入 SVG 上的overflow(以及clip)属性。 新规则确保可以安全使用溢出slice布局,而不会影响引用图像的溢出控制。
要链接到嵌入 SVG 图像的特定视图, 作者可以使用链接到 SVG 内容中定义的媒体片段。 要裁剪到光栅图像的特定部分, 作者可以使用基本媒体片段标识符 [媒体片段 URI 1.0(基本)]。 这两种类型的片段可能会影响图像的固有尺寸和/或固有纵横比。
由‘image’元素引用的资源表示一个 生成其自身解析树和文档对象模型(如果资源是 XML)的独立文档。 因此,图像中没有属性继承。
与‘use’不同, ‘image’元素不能引用 SVG 文件中的元素。
SVG 2 要求: | 支持自动大小的图像。 |
---|---|
解决方案: | 我们将允许 SVG 2 中的自动大小图像。 |
目的: | 允许光栅图像使用其自身大小,而无需设置宽度和高度。 |
负责人: | Cameron (ACTION-3340) |
SVG 2 要求: | 支持选择部分‘image’进行显示。 |
---|---|
解决方案: | 我们将提供一种方法,让‘image’选择要显示的图像部分,可能通过允许‘viewBox’来实现。 |
目的: | 允许选择图像的部分,而不要求作者手动切割图像。 |
负责人: | 无 |
SVG 2 要求: | 支持来自 css-images-3 的‘object-fit’和‘object-position’属性。 |
---|---|
解决方案: | SVG 2 将依赖于 CSS3 图像值和 CSS4 图像值。 |
目的: | 与 CSS 指定图像适配的方式保持一致,这由‘preserveAspectRatio’提供。 |
负责人: | Cameron 或 Erik(无行动) |
属性定义:
名称 | 值 | 初始值 | 可动画 |
---|---|---|---|
crossorigin | [ anonymous | use-credentials ]? | (参见属性的 HTML 定义) | 是 |
crossorigin 属性是一个CORS 设置属性, 除非另有说明,否则遵循 HTML 中定义的相同处理规则 [HTML]。
名称 | 值 | 初始值 | 可动画 |
---|---|---|---|
href | URL [URL] | (无) | 是 |
一个URL 引用, 确定要渲染的图像。 请参阅URL 引用属性和 已弃用的 XLink 属性中定义的公共处理。
该 URL 被处理并且资源被获取 如链接章节所述。
<?xml version="1.0" standalone="no"?> <svg width="4in" height="3in" xmlns="http://www.w3.org/2000/svg"> <desc>此图形链接到外部图像 </desc> <image x="200" y="200" width="100px" height="100px" href="myimage.png"> <title>我的图像</title> </image> </svg>
由于图像引用总是指向完整文档,目标 URL 仅被视为指向同一文件的链接,这将再次作为独立嵌入图像进行渲染。由于嵌入图像在安全模式下处理,它自身的嵌入引用不会被处理,从而防止无限递归。
<?xml version="1.0" standalone="no"?> <svg width="5cm" height="3cm" viewBox="0 0 50 30" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>递归 SVG</title> <desc>一个具有两个递归图像引用的 SVG。 一个引用使用文件名作为相对 URL, 另一个仅使用目标片段。 在支持外部文件引用的处理模式下查看时, 嵌入的图像应被渲染; 然而,嵌入图像必须在安全模式下处理, 因此递归只发生一次。 外观应为三层嵌套红色圆圈呈靶心图案; 最内层圆圈因目标样式而具有实心填充。 </desc> <style type="text/css"> #target:target { fill: red; } </style> <circle id="target" stroke="red" stroke-width="5" fill="none" cx="50%" cy="50%" r="12" /> <image xlink:href="recursive-image.svg" x="25%" y="25%" width="50%" height="50%" /> <image xlink:href="#target" x="45%" y="45%" width="10%" height="10%" /> </svg>
示例 recursive-image
当作为容器元素的子元素包含在 SVG 子树中,并使用HTML 命名空间时,以下 HTML 元素会被渲染:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> <html:video src="file.mp4" controls="controls"> </html:video> </svg>
在 SVG 文档片段中,作为'video'、'audio'、'iframe' 和 'canvas' 元素的子元素使用 HTML 命名空间的 HTML 元素表现如 HTML 中所指定。这特别适用于回退内容;如果渲染了回退内容,则嵌入元素的行为类似于 SVG ‘foreignObject’ 元素,以包含 HTML 内容。这种情况会发生在,例如,如果用户代理不支持指定的视频格式的‘video’ 元素,或者在脚本禁用的情况下对于‘canvas’ 元素。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> <html:video src="http://example.org/dummyvideo" controls="controls"> <html:p>该视频格式不被此浏览器支持。</html:p> </html:video> </svg>
HTML 规范同样适用于'track' 和 'source' 元素。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> <html:video src="file.mp4" controls="controls"> <html:source src="file.webm" type='video/webm;codecs="vp8, vorbis"'/> <html:source src="file.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/> </html:video> </svg>
当前,在 SVG 子树内,这些标签名未被 HTML 解析器识别为 HTML 命名空间元素,尽管将来可能会有所变化。因此,为了在 SVG 中包含这些元素,必须使用以下之一:
createElementNS
DOM API 方法创建的命名空间元素。SVG 子树中的其他 HTML 元素,除了在‘foreignObject’ 元素内部,必须被视为未知元素以进行渲染。
许多 HTML 元素将被 HTML 解析器视为解析错误,导致 SVG 片段终止。
SVG旨在与其他XML语言兼容,以描述和渲染其他类型的内容。‘foreignObject’元素允许在SVG图形的区域内包含非SVG命名空间的元素,这些元素使用其他用户代理进程进行渲染。包含的外部图形内容受SVG变换、滤镜、裁剪、蒙版和合成的影响。示例包括将MathML表达式插入到SVG绘图中[MathML3],或添加一块复杂的CSS格式化HTML文本或表单输入。
HTML解析器将‘foreignObject’内部的元素视为HTML文档片段内的元素。任何svg
或math
元素及其后代将被解析为在SVG或MathML命名空间内;所有其他标签将被解析为在HTML命名空间内。
在‘foreignObject’内的SVG命名空间元素将不会被渲染,除非在‘svg’元素被定义为‘foreignObject’的后代的情况下,定义一个适当的SVG片段。
可以将‘foreignObject’与‘switch’元素和‘requiredExtensions’属性结合使用,以提供对用户代理支持的正确检查,并在用户代理不支持的情况下提供替代渲染。
本规范并未定义‘requiredExtensions’值应如何映射到对不同XML语言的支持;未来的规范可能会这样做。
并不要求SVG用户代理支持调用其他任意用户代理来处理嵌入的外部对象类型;然而,所有符合规范的SVG用户代理都需要支持‘switch’元素,并且必须能够在‘switch’元素中的替代方案出现时渲染有效的SVG元素。
预计商业网页浏览器将支持SVG嵌入CSS格式化的HTML和MathML内容的能力,所渲染的内容受SVG片段中定义的变换和合成的影响。目前,这种能力并不是强制要求。
<?xml version="1.0" standalone="yes"?> <svg width="4in" height="3in" xmlns = 'http://www.w3.org/2000/svg'> <desc>此示例使用'switch'元素提供段落的回退图形表示,如果XMHTML不受支持。</desc> <!-- 'switch'元素将处理第一个子元素,其测试属性评估为true。--> <switch> <!-- 如果requiredExtensions属性评估为true(即用户代理支持嵌入SVG中的XHTML),则处理嵌入的XHTML。 --> <foreignObject width="100" height="50" requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML"> <!-- XHTML内容在此 --> <body xmlns="http://www.w3.org/1999/xhtml"> <p>这里是需要换行的段落</p> </body> </foreignObject> <!-- 否则,处理以下替代SVG。请注意,'text'元素上没有测试属性。如果未提供测试属性,则视为提供了测试属性且它们评估为true。--> <text font-size="10" font-family="Verdana"> <tspan x="10" y="10">这里是一个段落</tspan> <tspan x="10" y="20">需要换行。</tspan> </text> </switch> </svg>
一个SVGImageElement对象表示DOM中的‘image’元素。
[Exposed=Window] interface SVGImageElement : SVGGraphicsElement { [SameObject] readonly attribute SVGAnimatedLength x; [SameObject] readonly attribute SVGAnimatedLength y; [SameObject] readonly attribute SVGAnimatedLength width; [SameObject] readonly attribute SVGAnimatedLength height; [SameObject] readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio; attribute DOMString? crossOrigin; }; SVGImageElement包括SVGURIReference;
属性x、y、width和height的IDL属性反映了x、y、width和height属性及其对应的表现属性的计算值。
preserveAspectRatio IDL属性反映了‘preserveAspectRatio’内容属性。
crossOrigin IDL属性反映了‘crossorigin’内容属性。
一个SVGForeignObjectElement对象表示DOM中的‘foreignObject’。
[Exposed=Window] interface SVGForeignObjectElement : SVGGraphicsElement { [SameObject] readonly attribute SVGAnimatedLength x; [SameObject] readonly attribute SVGAnimatedLength y; [SameObject] readonly attribute SVGAnimatedLength width; [SameObject] readonly attribute SVGAnimatedLength height; };