SVG2规范中英对照(第二章:一致性原则,2.3)

2.3. Processing modes for SVG sub-resource documents 子资源文档处理模式

When an SVG document is viewed directly, it is expected to be displayed using the most comprehensiveprocessing mode supported by the user agent. However, when an SVG is processed as a sub-resource or embedded document, the following restrictions must apply:

当直接浏览SVG文档时,用户期望在大部分复杂的处理模式场景中得以支持,当SVG作为子资源或者嵌入文档被处理时,有下面的约束:

image’ references

图像引用

An SVG embedded within an ‘image’ element must be processed in secure animated mode if the embedding document supports declarative animation, or in secure static mode otherwise.

如果嵌入的文档支持声明动画,或者处于安全静态模式中,软如了‘Image’元素的SVG会被执行。

The same processing modes are expected to be used for other cases where SVG is used in place of a raster image, such as an HTML ‘img’ element or in any CSS property that takes an<image> data type. This is consistent with HTML's requirement that image sources must reference "a non-interactive, optionally animated, image resource that is neither paged nor scripted" [HTML]

相同的处理模式在光栅图像等场景下,SVG也是会被使用,例如在HTML的‘img’元素或者CSS属性的<image>标签数据类型。这个与HTML的要求(HTML's requirement)是一致的。HTML的图像资源必须是引用“非交互,可选择动画,图像资源不是页面或者脚本类型”。

iframe’ references

‘iframe’引用

SVG documents referenced by the an HTML ‘iframe’ element in an SVG document must use the same processing mode as the embedding document, subject to any restrictions defined by thesandbox attribute on the embedding ‘iframe’.

在HTML的‘iframe’元素被引用的SVG必须做为嵌入文档使用相同的处理模式,它受限于‘iframe’的沙盒属性(sandbox attribute)。

The same processing rules are intended to be used when an SVG document is loaded in an HTML ‘embed’, ‘iframe’ or ‘object’ element [HTML]. An HTML document that is a top-level browsing context in an interactive web browser is equivalent to SVG's dynamic interactive processing mode.

相同的处理规则被应用到SVG文档被载入到HTML的‘embed’,‘iframe’或者‘object’元素里。在交互的网页里高层浏览上下文的HTML文档与SVG的动态交互处理模式一致。

use’ element and other ‘href’ references

‘use’元素和其它‘href’引用

When SVG documents are loaded through ‘use’ element references or paint server elementcross-references they must be processed in secure static mode.

当SVG文档通过‘use’元素载入并引用或者被描画服务器元素交出引用时,他们必须在安全静态模式下处理。

Note that animations do not run while processing the sub-resource document, for both performance reasons and because there is currently no context defined for resource documents to reference their timeline against. However, when elements from a sub-resource document are cloned into the current document because of a ‘use’ element reference or paint-server cross-reference, the cloned element instances may be animated in the current document's timeline, as described in Animations in use-element shadow trees, and may trigger the loading of additional sub-resource files.

注意,当处理子资源文档时动画不会运行,因为出于性能的考虑,并且目前没有针对引用时间线的资源文档的上下文定义。然而,因为‘use’元素引用或者描画服务的交叉引用,当来自子资源文档被克隆成当前文档,被克隆的元素实例可以在当前文档时间线被运行动画,如‘Animations in use-element shadow trees’所描述的,并且可以触发额外子资源文件的载入。

Graphical effects references

图像效果引用

When SVG documents are loaded through any style property references that target specific elements in the document (as opposed to SVG as an image format), they must be processed in secure static mode.

当SVG文档通过任何文档(与SVG作为图像格式是截然不同的)内目标定义的风格属性引用被载入时,它们必须在安全静态模式下被处理。

Note that animations do not run in sub-resource documents, for both performance reasons and because there is currently no context defined for resource documents to reference their timeline against.

注意动画不能在子资源文档下运行,因为性能和当前没有为资源文档引用它们的时间线而定义的上下文。

Some style properties may reference either specific elements or entire image files; the processing mode is more restrictive in the first case. For example, a reference to an SVG ‘mask’ element will not be animated, but an entire SVG file used as an image mask can be.

某些风格属性可以引用特定元素或者整个图像文件;处理模式首先要更加严格。例如,对于‘mask’元素的引用不能被动画,但是整个SVG文件作为一副图像被使用可以标记为可以。

SVG in fonts

SVG字体

When SVG files are processed as part of a font reference, they must use the secure animated modeif animated glyphs are supported, or secure static mode otherwise.

当SVG文件被作为字体引用一部分处理,当支持动画或者安全静态模式时它们必须使用安全动画模式。

These restrictions are included in the OpenType specification for processing documents from the "SVG" table. OpenType also applies additional restrictions, in the form of a user agent style sheetthat prevents rendering of text and foreign objects [OPENTYPE].

这些约束被包含在OpenType规范中,用于处理来自SVG表的文档。OpenType也应用额外约束,参考‘user agent style sheet’,阻止文字和外部对象的渲染。

SVG document fragments that are included inline in a host document must use a processing mode that matches that of the host document. SVG document fragments included as children of an SVG ‘foreignObject’ element must use the processing mode of the surrounding SVG document; non-SVG foreign content must be processed with equivalent restrictions.

SVG文档片被嵌入到主文档内,该主文档必须使用处理模式来匹配。SVG文档片作为SVG的‘foreignObject’元素的儿子被嵌入,则必须使用包围SVG文档的处理模式;非SVG外部资源必须使用同等约束进行处理。

For example, if an SVG document is being used in secure animated mode due to being referenced by an HTML ‘img’ or SVG ‘image’ element, then any content within a ‘foreignObject’ element must have scripts, interactivity, and external file references disabled, but should have declarative animation enabled.

例如,如果一个SVG文档因为通过HTML‘img’或者SVG‘image’元素被引用而使用安全动画模式,那么在‘foreignObject’元素内的任何内容,包括脚本、交互、外部文件引用都会被禁止,但是应该声明动画可用。

2.3.1. Examples

Below are various methods of embedding SVG in an HTML page by reference, along with the expected processing mode and allowed features for each.

下面是各种SVG在HTML页面的嵌入方法,每一个方法给出了期望的处理模式和允许的特性。

Each cell in the "Live Example" row should display a yellow smiley face. In each example below, clicking on the eyes tests link traversal, and clicking on the face tests declarative interactivity and script execution. The link should replace the image with a blue square (clicking it will revert it to the original image). The declarative interactivity uses the ‘set’ element to change the face from shades of yellow to shades of green, and uses CSS pseudoclasses to add a stroke to the interactive elements. The script should fill in the smile. Time-based (as opposed to interactivity-based) declarative animation is supported if the left eye is winking (using the ‘animate’ element) and if the eyes are dark blue with regular flashes of light blue (using CSS keyframe animation).

在“Live Example”行每个单元里显示一个黄色笑脸。下面每一个例子,挨个点击眼睛和脸。链接会被蓝色方块替代(再次添加又会翻转回原来的图像)。这种交互使用‘set’元素去改变脸从黄色到绿色,并且使用CSS添加下划线。脚本填充为微笑。如果左眼在眨眼(使用‘animate’元素)和如果眼睛使用标准的浅蓝色闪烁而变为深蓝色(使用CSS关键框架动画),则支持基于时间(对应的是基于交互)的动画。

The expected processing modes and features outlined here are subject to any future changes in the corresponding HTML or CSS specification.

下面总结了期望处理模式和特性,主要针对与HTML和CSS规范的未来变化。

Embedding methodobject without sandboxingiframe with sandbox=""imgCSS background
Expected processing modedynamic interactivedynamic interactive, with restrictionssecure animatedsecure animated
Declarative, time-based animation
(winking left eye, color-change in both eyes)
allowedallowedallowedallowed
Declarative, interactive animation and style changes
(face color changes when clicked, face/eyes outlined when hovered or focused)
allowedalloweddisableddisabled
Link navigation within the same browsing context, to the same domain
(image changes when clicking eyes)
allowedalloweddisableddisabled
Scripted interaction
(smile widens when clicking face)
alloweddisabled (because of sandboxing)disableddisabled
Live example  smiley face, as an image

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值