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 method object without sandboxing iframe with sandbox="" img CSS background
Expected processing mode dynamic interactive dynamic interactive, with restrictions secure animated secure animated
Declarative, time-based animation
(winking left eye, color-change in both eyes)
allowed allowed allowed allowed
Declarative, interactive animation and style changes
(face color changes when clicked, face/eyes outlined when hovered or focused)
allowed allowed disabled disabled
Link navigation within the same browsing context, to the same domain
(image changes when clicking eyes)
allowed allowed disabled disabled
Scripted interaction
(smile widens when clicking face)
allowed disabled (because of sandboxing) disabled disabled
Live example     smiley face, as an image

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章