- From: SVG Working Group repository <cam+svgwgrepo@mcc.id.au>
- Date: Fri, 10 Oct 2014 04:09:54 -0700 (PDT)
- To: public-svg-wg@w3.org
https://github.com/w3c/svgwg/commit/15bb15248d404e0523c710550c94856a88864b09
commit 15bb15248d404e0523c710550c94856a88864b09
Author: satakagi <satakagi@gmail.com>
Date: Fri Oct 10 20:04:14 2014 +0900
Added fixed-position, non-scaling-size, and non-rotation to Vector Effect.
diff --git a/master/definitions.xml b/master/definitions.xml
index 4b7b79d..aec4e44 100644
--- a/master/definitions.xml
+++ b/master/definitions.xml
@@ -1015,7 +1015,7 @@
<property name='text-rendering' href='painting.html#TextRenderingProperty'/>
<property name='transform' href='coords.html#TransformProperty'/>
<property name='unicode-bidi' href='text.html#UnicodeBidiProperty'/>
- <property name='vector-effect' href='painting.html#NonScalingStroke'/>
+ <property name='vector-effect' href='painting.html#VectorEffectProperty'/>
<property name='word-spacing' href='text.html#WordSpacingProperty'/>
<property name='writing-mode' href='text.html#WritingModeProperty'/>
<property name='x' href='layout.html#XProperty'/>
diff --git a/master/images/painting/vectorEffects/ve-fixedPosition.png b/master/images/painting/vectorEffects/ve-fixedPosition.png
new file mode 100755
index 0000000..3c930e4
Binary files /dev/null and b/master/images/painting/vectorEffects/ve-fixedPosition.png differ
diff --git a/master/images/painting/vectorEffects/ve-fixedPosition.svg b/master/images/painting/vectorEffects/ve-fixedPosition.svg
new file mode 100755
index 0000000..d14c6e4
--- /dev/null
+++ b/master/images/painting/vectorEffects/ve-fixedPosition.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50,-50,500,500" height="5cm" width="5cm">
+
+ <rect x="-50" y="-50" width="500" height="500" stroke="orange" stroke-width="3" fill="none"></rect>
+
+ <!-- Nested user space is transformed by this transform attribute -->
+ <g id="base" transform="matrix(2.1169438081370817,0.3576047954311102,-0.3576047954311102,1.4700998667618626,0,0)">
+
+ <!-- Graph paper on the this svg's base user space -->
+ <g stroke="green" stroke-width="1" fill="none">
+ <circle cx="0" cy="0" r="10"></circle>
+ <circle cx="150" cy="150" r="7"></circle>
+ <path fill="green" stroke="none" d="M0,-3 L30,-3 25,-10 50,0 25,10 30,3 0,3z"></path>
+
+ <line x1="-100" y1="-100" x2="600" y2="-100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="000" x2="600" y2="000"></line>
+ <line x1="-100" y1="100" x2="600" y2="100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="200" x2="600" y2="200" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="300" x2="600" y2="300" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="400" x2="600" y2="400" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="500" x2="600" y2="500" stroke-dasharray="5,5"></line>
+
+ <line y1="-100" x1="-100" y2="600" x2="-100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="000" y2="600" x2="000"></line>
+ <line y1="-100" x1="100" y2="600" x2="100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="200" y2="600" x2="200" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="300" y2="600" x2="300" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="400" y2="600" x2="400" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="500" y2="600" x2="500" stroke-dasharray="5,5"></line>
+ </g>
+
+ <!-- Figure having vector effect -->
+ <!-- An thick red right arrow and small rectangle on this figure's nested user space origin -->
+ <path id="ve" vector-effect="" stroke="red" stroke-width="3" fill="none" transform="matrix(1,0,0,1,84.615956583008,81.45088021786906)" d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"></path>
+
+ </g>
+</svg>
\ No newline at end of file
diff --git a/master/images/painting/vectorEffects/ve-initial.png b/master/images/painting/vectorEffects/ve-initial.png
new file mode 100755
index 0000000..914932b
Binary files /dev/null and b/master/images/painting/vectorEffects/ve-initial.png differ
diff --git a/master/images/painting/vectorEffects/ve-initial.svg b/master/images/painting/vectorEffects/ve-initial.svg
new file mode 100755
index 0000000..1af2f49
--- /dev/null
+++ b/master/images/painting/vectorEffects/ve-initial.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50,-50,500,500" height="5cm" width="5cm">
+
+ <rect x="-50" y="-50" width="500" height="500" stroke="orange" stroke-width="3" fill="none"></rect>
+
+ <!-- Nested user space is transformed by this transform attribute -->
+ <g id="base" transform="matrix(1,0,0,1,0,0)">
+
+ <!-- Graph paper on the this svg's base user space -->
+ <g stroke="green" stroke-width="1" fill="none">
+ <circle cx="0" cy="0" r="10"></circle>
+ <circle cx="150" cy="150" r="7"></circle>
+ <path fill="green" stroke="none" d="M0,-3 L30,-3 25,-10 50,0 25,10 30,3 0,3z"></path>
+
+ <line x1="-100" y1="-100" x2="600" y2="-100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="000" x2="600" y2="000"></line>
+ <line x1="-100" y1="100" x2="600" y2="100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="200" x2="600" y2="200" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="300" x2="600" y2="300" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="400" x2="600" y2="400" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="500" x2="600" y2="500" stroke-dasharray="5,5"></line>
+
+ <line y1="-100" x1="-100" y2="600" x2="-100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="000" y2="600" x2="000"></line>
+ <line y1="-100" x1="100" y2="600" x2="100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="200" y2="600" x2="200" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="300" y2="600" x2="300" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="400" y2="600" x2="400" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="500" y2="600" x2="500" stroke-dasharray="5,5"></line>
+ </g>
+
+ <!-- Figure having vector effect -->
+ <!-- An thick red right arrow and small rectangle on this figure's nested user space origin -->
+ <path id="ve" vector-effect="" stroke="red" stroke-width="3" fill="none" transform="matrix(1,0,0,1,150,150)" d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"></path>
+
+ </g>
+</svg>
\ No newline at end of file
diff --git a/master/images/painting/vectorEffects/ve-nonRotation-fixedPosition.png b/master/images/painting/vectorEffects/ve-nonRotation-fixedPosition.png
new file mode 100755
index 0000000..25293de
Binary files /dev/null and b/master/images/painting/vectorEffects/ve-nonRotation-fixedPosition.png differ
diff --git a/master/images/painting/vectorEffects/ve-nonRotation-fixedPosition.svg b/master/images/painting/vectorEffects/ve-nonRotation-fixedPosition.svg
new file mode 100755
index 0000000..0f73a5c
--- /dev/null
+++ b/master/images/painting/vectorEffects/ve-nonRotation-fixedPosition.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50,-50,500,500" height="5cm" width="5cm">
+
+ <rect x="-50" y="-50" width="500" height="500" stroke="orange" stroke-width="3" fill="none"></rect>
+
+ <!-- Nested user space is transformed by this transform attribute -->
+ <g id="base" transform="matrix(2.1169438081370817,0.3576047954311102,-0.3576047954311102,1.4700998667618626,0,0)">
+
+ <!-- Graph paper on the this svg's base user space -->
+ <g stroke="green" stroke-width="1" fill="none">
+ <circle cx="0" cy="0" r="10"></circle>
+ <circle cx="150" cy="150" r="7"></circle>
+ <path fill="green" stroke="none" d="M0,-3 L30,-3 25,-10 50,0 25,10 30,3 0,3z"></path>
+
+ <line x1="-100" y1="-100" x2="600" y2="-100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="000" x2="600" y2="000"></line>
+ <line x1="-100" y1="100" x2="600" y2="100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="200" x2="600" y2="200" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="300" x2="600" y2="300" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="400" x2="600" y2="400" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="500" x2="600" y2="500" stroke-dasharray="5,5"></line>
+
+ <line y1="-100" x1="-100" y2="600" x2="-100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="000" y2="600" x2="000"></line>
+ <line y1="-100" x1="100" y2="600" x2="100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="200" y2="600" x2="200" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="300" y2="600" x2="300" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="400" y2="600" x2="400" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="500" y2="600" x2="500" stroke-dasharray="5,5"></line>
+ </g>
+
+ <!-- Figure having vector effect -->
+ <!-- An thick red right arrow and small rectangle on this figure's nested user space origin -->
+ <path id="ve" vector-effect="" stroke="red" stroke-width="3" fill="none" transform="matrix(0.8167221482010348,-0.19866933079506124,0.19866933079506124,1.1760798934094898,84.615956583008,81.45088021786906)" d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"></path>
+
+ </g>
+</svg>
\ No newline at end of file
diff --git a/master/images/painting/vectorEffects/ve-nonRotation.png b/master/images/painting/vectorEffects/ve-nonRotation.png
new file mode 100755
index 0000000..bf033bb
Binary files /dev/null and b/master/images/painting/vectorEffects/ve-nonRotation.png differ
diff --git a/master/images/painting/vectorEffects/ve-nonRotation.svg b/master/images/painting/vectorEffects/ve-nonRotation.svg
new file mode 100755
index 0000000..a2114ba
--- /dev/null
+++ b/master/images/painting/vectorEffects/ve-nonRotation.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50,-50,500,500" height="5cm" width="5cm">
+
+ <rect x="-50" y="-50" width="500" height="500" stroke="orange" stroke-width="3" fill="none"></rect>
+
+ <!-- Nested user space is transformed by this transform attribute -->
+ <g id="base" transform="matrix(2.1169438081370817,0.3576047954311102,-0.3576047954311102,1.4700998667618626,0,0)">
+
+ <!-- Graph paper on the this svg's base user space -->
+ <g stroke="green" stroke-width="1" fill="none">
+ <circle cx="0" cy="0" r="10"></circle>
+ <circle cx="150" cy="150" r="7"></circle>
+ <path fill="green" stroke="none" d="M0,-3 L30,-3 25,-10 50,0 25,10 30,3 0,3z"></path>
+
+ <line x1="-100" y1="-100" x2="600" y2="-100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="000" x2="600" y2="000"></line>
+ <line x1="-100" y1="100" x2="600" y2="100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="200" x2="600" y2="200" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="300" x2="600" y2="300" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="400" x2="600" y2="400" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="500" x2="600" y2="500" stroke-dasharray="5,5"></line>
+
+ <line y1="-100" x1="-100" y2="600" x2="-100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="000" y2="600" x2="000"></line>
+ <line y1="-100" x1="100" y2="600" x2="100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="200" y2="600" x2="200" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="300" y2="600" x2="300" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="400" y2="600" x2="400" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="500" y2="600" x2="500" stroke-dasharray="5,5"></line>
+ </g>
+
+ <!-- Figure having vector effect -->
+ <!-- An thick red right arrow and small rectangle on this figure's nested user space origin -->
+ <path id="ve" vector-effect="" stroke="red" stroke-width="3" fill="none" transform="matrix(0.8167221482010348,-0.19866933079506124,0.19866933079506124,1.1760798934094898,150,150)" d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"></path>
+
+ </g>
+</svg>
\ No newline at end of file
diff --git a/master/images/painting/vectorEffects/ve-nonScalingSize-fixedPosition.png b/master/images/painting/vectorEffects/ve-nonScalingSize-fixedPosition.png
new file mode 100755
index 0000000..9aea6f2
Binary files /dev/null and b/master/images/painting/vectorEffects/ve-nonScalingSize-fixedPosition.png differ
diff --git a/master/images/painting/vectorEffects/ve-nonScalingSize-fixedPosition.svg b/master/images/painting/vectorEffects/ve-nonScalingSize-fixedPosition.svg
new file mode 100755
index 0000000..55e4c5c
--- /dev/null
+++ b/master/images/painting/vectorEffects/ve-nonScalingSize-fixedPosition.svg
@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50,-50,500,500" height="5cm" width="5cm">
+ <rect x="-50" y="-50" width="500" height="500" stroke="orange" stroke-width="3" fill="none"></rect>
+
+ <!-- Nested user space is transformed by this transform attribute -->
+ <g id="base" transform="matrix(2.1169438081370817,0.3576047954311102,-0.3576047954311102,1.4700998667618626,0,0)">
+
+ <!-- Graph paper on the this svg's base user space -->
+ <g stroke="green" stroke-width="1" fill="none">
+ <circle cx="0" cy="0" r="10"></circle>
+ <circle cx="150" cy="150" r="7"></circle>
+ <path fill="green" stroke="none" d="M0,-3 L30,-3 25,-10 50,0 25,10 30,3 0,3z"></path>
+
+ <line x1="-100" y1="-100" x2="600" y2="-100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="000" x2="600" y2="000"></line>
+ <line x1="-100" y1="100" x2="600" y2="100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="200" x2="600" y2="200" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="300" x2="600" y2="300" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="400" x2="600" y2="400" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="500" x2="600" y2="500" stroke-dasharray="5,5"></line>
+
+ <line y1="-100" x1="-100" y2="600" x2="-100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="000" y2="600" x2="000"></line>
+ <line y1="-100" x1="100" y2="600" x2="100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="200" y2="600" x2="200" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="300" y2="600" x2="300" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="400" y2="600" x2="400" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="500" y2="600" x2="500" stroke-dasharray="5,5"></line>
+ </g>
+
+ <!-- Figure having vector effect -->
+ <!-- An thick red right arrow and small rectangle on this figure's nested user space origin -->
+ <path id="ve" vector-effect="" stroke="red" stroke-width="3" fill="none" transform="matrix(0.5555555555555556,0,0,0.5555555555555556,84.615956583008,81.45088021786906)" d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"></path>
+
+ </g>
+</svg>
\ No newline at end of file
diff --git a/master/images/painting/vectorEffects/ve-nonScalingSize-nonRotation-fixedPosition.png b/master/images/painting/vectorEffects/ve-nonScalingSize-nonRotation-fixedPosition.png
new file mode 100755
index 0000000..ca2650e
Binary files /dev/null and b/master/images/painting/vectorEffects/ve-nonScalingSize-nonRotation-fixedPosition.png differ
diff --git a/master/images/painting/vectorEffects/ve-nonScalingSize-nonRotation-fixedPosition.svg b/master/images/painting/vectorEffects/ve-nonScalingSize-nonRotation-fixedPosition.svg
new file mode 100755
index 0000000..a7a55e6
--- /dev/null
+++ b/master/images/painting/vectorEffects/ve-nonScalingSize-nonRotation-fixedPosition.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50,-50,500,500" height="5cm" width="5cm">
+
+ <rect x="-50" y="-50" width="500" height="500" stroke="orange" stroke-width="3" fill="none"></rect>
+
+ <!-- Nested user space is transformed by this transform attribute -->
+ <g id="base" transform="matrix(2.1169438081370817,0.3576047954311102,-0.3576047954311102,1.4700998667618626,0,0)">
+
+ <!-- Graph paper on the this svg's base user space -->
+ <g stroke="green" stroke-width="1" fill="none">
+ <circle cx="0" cy="0" r="10"></circle>
+ <circle cx="150" cy="150" r="7"></circle>
+ <path fill="green" stroke="none" d="M0,-3 L30,-3 25,-10 50,0 25,10 30,3 0,3z"></path>
+
+ <line x1="-100" y1="-100" x2="600" y2="-100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="000" x2="600" y2="000"></line>
+ <line x1="-100" y1="100" x2="600" y2="100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="200" x2="600" y2="200" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="300" x2="600" y2="300" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="400" x2="600" y2="400" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="500" x2="600" y2="500" stroke-dasharray="5,5"></line>
+
+ <line y1="-100" x1="-100" y2="600" x2="-100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="000" y2="600" x2="000"></line>
+ <line y1="-100" x1="100" y2="600" x2="100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="200" y2="600" x2="200" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="300" y2="600" x2="300" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="400" y2="600" x2="400" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="500" y2="600" x2="500" stroke-dasharray="5,5"></line>
+ </g>
+
+ <!-- Figure having vector effect -->
+ <!-- An thick red right arrow and small rectangle on this figure's nested user space origin -->
+ <path id="ve" vector-effect="" stroke="red" stroke-width="3" fill="none" transform="matrix(0.4537345267783527,-0.11037185044170068,0.11037185044170068,0.6533777185608277,84.615956583008,81.45088021786906)" d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"></path>
+
+ </g>
+</svg>
\ No newline at end of file
diff --git a/master/images/painting/vectorEffects/ve-nonScalingSize-nonRotation.png b/master/images/painting/vectorEffects/ve-nonScalingSize-nonRotation.png
new file mode 100755
index 0000000..f84fcc7
Binary files /dev/null and b/master/images/painting/vectorEffects/ve-nonScalingSize-nonRotation.png differ
diff --git a/master/images/painting/vectorEffects/ve-nonScalingSize-nonRotation.svg b/master/images/painting/vectorEffects/ve-nonScalingSize-nonRotation.svg
new file mode 100755
index 0000000..908625d
--- /dev/null
+++ b/master/images/painting/vectorEffects/ve-nonScalingSize-nonRotation.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50,-50,500,500" height="5cm" width="5cm">
+
+ <rect x="-50" y="-50" width="500" height="500" stroke="orange" stroke-width="3" fill="none"></rect>
+
+ <!-- Nested user space is transformed by this transform attribute -->
+ <g id="base" transform="matrix(2.1169438081370817,0.3576047954311102,-0.3576047954311102,1.4700998667618626,0,0)">
+
+ <!-- Graph paper on the this svg's base user space -->
+ <g stroke="green" stroke-width="1" fill="none">
+ <circle cx="0" cy="0" r="10"></circle>
+ <circle cx="150" cy="150" r="7"></circle>
+ <path fill="green" stroke="none" d="M0,-3 L30,-3 25,-10 50,0 25,10 30,3 0,3z"></path>
+
+ <line x1="-100" y1="-100" x2="600" y2="-100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="000" x2="600" y2="000"></line>
+ <line x1="-100" y1="100" x2="600" y2="100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="200" x2="600" y2="200" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="300" x2="600" y2="300" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="400" x2="600" y2="400" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="500" x2="600" y2="500" stroke-dasharray="5,5"></line>
+
+ <line y1="-100" x1="-100" y2="600" x2="-100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="000" y2="600" x2="000"></line>
+ <line y1="-100" x1="100" y2="600" x2="100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="200" y2="600" x2="200" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="300" y2="600" x2="300" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="400" y2="600" x2="400" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="500" y2="600" x2="500" stroke-dasharray="5,5"></line>
+ </g>
+
+ <!-- Figure having vector effect -->
+ <!-- An thick red right arrow and small rectangle on this figure's nested user space origin -->
+ <path id="ve" vector-effect="" stroke="red" stroke-width="3" fill="none" transform="matrix(0.4537345267783527,-0.11037185044170068,0.11037185044170068,0.6533777185608277,150,150)" d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"></path>
+
+ </g>
+</svg>
\ No newline at end of file
diff --git a/master/images/painting/vectorEffects/ve-nonScalingSize.png b/master/images/painting/vectorEffects/ve-nonScalingSize.png
new file mode 100755
index 0000000..9ae9acc
Binary files /dev/null and b/master/images/painting/vectorEffects/ve-nonScalingSize.png differ
diff --git a/master/images/painting/vectorEffects/ve-nonScalingSize.svg b/master/images/painting/vectorEffects/ve-nonScalingSize.svg
new file mode 100755
index 0000000..bccdb3b
--- /dev/null
+++ b/master/images/painting/vectorEffects/ve-nonScalingSize.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50,-50,500,500" height="5cm" width="5cm">
+
+ <rect x="-50" y="-50" width="500" height="500" stroke="orange" stroke-width="3" fill="none"></rect>
+
+ <!-- Nested user space is transformed by this transform attribute -->
+ <g id="base" transform="matrix(2.1169438081370817,0.3576047954311102,-0.3576047954311102,1.4700998667618626,0,0)">
+
+ <!-- Graph paper on the this svg's base user space -->
+ <g stroke="green" stroke-width="1" fill="none">
+ <circle cx="0" cy="0" r="10"></circle>
+ <circle cx="150" cy="150" r="7"></circle>
+ <path fill="green" stroke="none" d="M0,-3 L30,-3 25,-10 50,0 25,10 30,3 0,3z"></path>
+
+ <line x1="-100" y1="-100" x2="600" y2="-100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="000" x2="600" y2="000"></line>
+ <line x1="-100" y1="100" x2="600" y2="100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="200" x2="600" y2="200" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="300" x2="600" y2="300" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="400" x2="600" y2="400" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="500" x2="600" y2="500" stroke-dasharray="5,5"></line>
+
+ <line y1="-100" x1="-100" y2="600" x2="-100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="000" y2="600" x2="000"></line>
+ <line y1="-100" x1="100" y2="600" x2="100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="200" y2="600" x2="200" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="300" y2="600" x2="300" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="400" y2="600" x2="400" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="500" y2="600" x2="500" stroke-dasharray="5,5"></line>
+ </g>
+
+ <!-- Figure having vector effect -->
+ <!-- An thick red right arrow and small rectangle on this figure's nested user space origin -->
+ <path id="ve" vector-effect="" stroke="red" stroke-width="3" fill="none" transform="matrix(0.5555555555555556,0,0,0.5555555555555556,150,150)" d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"></path>
+
+ </g>
+</svg>
\ No newline at end of file
diff --git a/master/images/painting/vectorEffects/ve-nonScalingStroke.png b/master/images/painting/vectorEffects/ve-nonScalingStroke.png
new file mode 100755
index 0000000..3a696da
Binary files /dev/null and b/master/images/painting/vectorEffects/ve-nonScalingStroke.png differ
diff --git a/master/images/painting/vectorEffects/ve-nonScalingStroke.svg b/master/images/painting/vectorEffects/ve-nonScalingStroke.svg
new file mode 100755
index 0000000..5eba990
--- /dev/null
+++ b/master/images/painting/vectorEffects/ve-nonScalingStroke.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50,-50,500,500" height="5cm" width="5cm">
+
+ <rect x="-50" y="-50" width="500" height="500" stroke="orange" stroke-width="3" fill="none"></rect>
+
+ <!-- Nested user space is transformed by this transform attribute -->
+ <g id="base" transform="matrix(2.1169438081370817,0.3576047954311102,-0.3576047954311102,1.4700998667618626,0,0)">
+
+ <!-- Graph paper on the this svg's base user space -->
+ <g stroke="green" stroke-width="1" fill="none">
+ <circle cx="0" cy="0" r="10"></circle>
+ <circle cx="150" cy="150" r="7"></circle>
+ <path fill="green" stroke="none" d="M0,-3 L30,-3 25,-10 50,0 25,10 30,3 0,3z"></path>
+
+ <line x1="-100" y1="-100" x2="600" y2="-100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="000" x2="600" y2="000"></line>
+ <line x1="-100" y1="100" x2="600" y2="100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="200" x2="600" y2="200" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="300" x2="600" y2="300" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="400" x2="600" y2="400" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="500" x2="600" y2="500" stroke-dasharray="5,5"></line>
+
+ <line y1="-100" x1="-100" y2="600" x2="-100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="000" y2="600" x2="000"></line>
+ <line y1="-100" x1="100" y2="600" x2="100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="200" y2="600" x2="200" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="300" y2="600" x2="300" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="400" y2="600" x2="400" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="500" y2="600" x2="500" stroke-dasharray="5,5"></line>
+ </g>
+
+ <!-- Figure having vector effect -->
+ <!-- An thick red right arrow and small rectangle on this figure's nested user space origin -->
+ <path id="ve" vector-effect="non-scaling-stroke" stroke="red" stroke-width="3" fill="none" transform="matrix(1,0,0,1,150,150)" d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"></path>
+
+ </g>
+</svg>
\ No newline at end of file
diff --git a/master/images/painting/vectorEffects/ve-none.png b/master/images/painting/vectorEffects/ve-none.png
new file mode 100755
index 0000000..f632559
Binary files /dev/null and b/master/images/painting/vectorEffects/ve-none.png differ
diff --git a/master/images/painting/vectorEffects/ve-none.svg b/master/images/painting/vectorEffects/ve-none.svg
new file mode 100755
index 0000000..60bf612
--- /dev/null
+++ b/master/images/painting/vectorEffects/ve-none.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50,-50,500,500" height="5cm" width="5cm">
+
+ <rect x="-50" y="-50" width="500" height="500" stroke="orange" stroke-width="3" fill="none"></rect>
+
+ <!-- Nested user space is transformed by this transform attribute -->
+ <g id="base" transform="matrix(2.1169438081370817,0.3576047954311102,-0.3576047954311102,1.4700998667618626,0,0)">
+
+ <!-- Graph paper on the this svg's base user space -->
+ <g stroke="green" stroke-width="1" fill="none">
+ <circle cx="0" cy="0" r="10"></circle>
+ <circle cx="150" cy="150" r="7"></circle>
+ <path fill="green" stroke="none" d="M0,-3 L30,-3 25,-10 50,0 25,10 30,3 0,3z"></path>
+
+ <line x1="-100" y1="-100" x2="600" y2="-100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="000" x2="600" y2="000"></line>
+ <line x1="-100" y1="100" x2="600" y2="100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="200" x2="600" y2="200" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="300" x2="600" y2="300" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="400" x2="600" y2="400" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="500" x2="600" y2="500" stroke-dasharray="5,5"></line>
+
+ <line y1="-100" x1="-100" y2="600" x2="-100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="000" y2="600" x2="000"></line>
+ <line y1="-100" x1="100" y2="600" x2="100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="200" y2="600" x2="200" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="300" y2="600" x2="300" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="400" y2="600" x2="400" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="500" y2="600" x2="500" stroke-dasharray="5,5"></line>
+ </g>
+
+ <!-- Figure having vector effect -->
+ <!-- An thick red right arrow and small rectangle on this figure's nested user space origin -->
+ <path id="ve" vector-effect="" stroke="red" stroke-width="3" fill="none" transform="matrix(1,0,0,1,150,150)" d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"></path>
+
+ </g>
+</svg>
\ No newline at end of file
diff --git a/master/painting.html b/master/painting.html
old mode 100644
new mode 100755
index 5b6fc89..07c7782
--- a/master/painting.html
+++ b/master/painting.html
@@ -2088,14 +2088,9 @@ Note that since <a>'visibility'</a> is an inherited property,
although it has no effect on a <a>container element</a> itself,
its inherited value can affect descendant elements.</p>
-<h2 id="NonScalingStroke">Non-scaling stroke</h2>
- <p>Sometimes it is of interest to let the outline of an object keep its original width no
- matter which transforms are applied to it. For example, in a map with a 2px wide line representing
- roads it is of interest to keep the roads 2px wide even when the user zooms into the
- map. To achieve this, SVG Tiny 1.2 introduces the <a href="#VectorEffectProperty"><span class="prop-name">'vector-effect'</span></a>
- property. Future versions of the SVG language will allow for more powerful vector
- effects through this property but this version restricts it to being able to
- specify the non-scaling stroke behavior. </p>
+<h2 id="VectorEffects">Vector Effects</h2>
+ <p>Sometimes it is of interest to let the outline of an object keep its original width or to let the position of an object fix no matter which transforms are applied to it. For example, in a map with a 2px wide line representing roads it is of interest to keep the roads 2px wide even when the user zooms into the map, or introductory notes on the graphic chart in which panning is possible. </p>
+ <p>To offer such effects regarding special coordinate transformations and graphic drawings, SVG Tiny 1.2 introduces the <a><span class="prop-name">'vector-effect'</span></a> property. Although SVG Tiny 1.2 introduced only non-scaling stroke behavior, this version introduces a number of additional effects. Furthermore, since these effects can be specified in combination, they show more various effects. And, future versions of the SVG language will allow for more powerful vector effects through this property. </p>
<table class="propdef">
<tr>
@@ -2104,11 +2099,11 @@ its inherited value can affect descendant elements.</p>
</tr>
<tr>
<th>Value:</th>
- <td>non-scaling-stroke | none</td>
+ <td>none | [non-scaling-stroke | non-scaling-size | non-rotation | fixed-position]+ [ viewport | screen ]?</td>
</tr>
<tr>
<th>Initial:</th>
- <td>none</td>
+ <td>none (When values except <span class="prop-value">none</span> are set, <span class="prop-value">viewport</span> becomes the another initial value.</td>)
</tr>
<tr>
<th>Applies to:</th>
@@ -2154,13 +2149,1590 @@ its inherited value can affect descendant elements.</p>
(Stroke outline is always filled with stroke paint in the current user space). The resulting visual effect of this
modification is that stroke width is not dependant on the transformations of the element
(including non-uniform scaling and shear transformations) and zoom level. </dd>
+ <dt class="prop-value"> non-scaling-size </dt>
+ <dd> Specifies special <a href="intro.html#TermUserSpace"><span class="svg-term">user space</span></a> toward this element and its descendant by constrained transformations with the following characteristics. The scale of the <a href="intro.html#TermUserSpace"><span class="svg-term">user space</span></a> do not change in spite of change of <a>CTM</a>s from a host coordinate space. However, it does not specify the suppression of rotation and skew. Also, it does not specify the fixation of placement of <a href="intro.html#TermUserSpace"><span class="svg-term">user space</span></a>. Since non-scaling-size suppresses scaling of <a>user space</a>, it also has the characteristic of non-scaling-stroke. The transformation formula and the example behavior are indicated to the following chapter. </dd>
+ <dt class="prop-value"> non-rotation </dt>
+ <dd> Specifies special <a href="intro.html#TermUserSpace"><span class="svg-term">user space</span></a> toward this element and its descendant by constrained transformations with the following characteristics. The rotation and skew of the <a href="intro.html#TermUserSpace"><span class="svg-term">user space</span></a> is suppressd in spite of change of <a>CTM</a>s from a host coordinate space. However, it does not specify the suppression of scaling. Also, it does not specify the fixation of placement of <a href="intro.html#TermUserSpace"><span class="svg-term">user space</span></a>.
+The transformation formula and the example behavior are indicated to the following chapter. </dd>
+ <dt class="prop-value"> fixed-position </dt>
+ <dd> Specifies special <a href="intro.html#TermUserSpace"><span class="svg-term">user space</span></a> toward this element and its descendant by constrained transformations with the following characteristics. The placement of <a href="intro.html#TermUserSpace"><span class="svg-term">user space</span></a> is fixed in spite of change of <a>CTM</a>s from a host coordinate space. However, it does not specify the suppression of rotation, skew and scaling. When the element that has fixed-position effect and also has <span class="property-name"><a>'transform'</a></span> property, that property is consumed for this effect. The shift conponents <var>e</var> and <var>f</var> of matrix of <span class="property-name"><a>'transform'</a></span> property are used to transfer the origin of fixed <a href="intro.html#TermUserSpace"><span class="svg-term">user space</span></a>. The transformation formula and the example behavior are indicated to the following chapter. </dd>
+ </dl>
+
+ <p>These values can be enumerated. Thereby, the effect which has these characteristics simultaneously can be specified. </p>
+
+ <p>The following two values assists the above-mentioned values. They show the host coordinate space of constrained transformations. Especially it has effective for the element belonging to <a href="coords.html#EstablishingANewViewport">nested viewport coordinate system</a> such as nested contents or nested <a>'svg'</a> elements. An initial value in case it is not specified is <span class="prop-value">viewport</span>.</p>
+
+ <dl>
+ <dt class="prop-value"> viewport </dt>
+ <dd>Specifies immediate <a>viewport coordinate system</a> as the host coordinate space. When that element belongs to nested <a>viewport coordinate system</a>, vector effects are applied toward <a>viewport coordinate system</a> to which that element belongs directly. That is, that vector effect is not effective for change of <a>CTM</a> on ancestral <a>viewport coordinate system</a>. </dd>
+ <dt class="prop-value"> screen </dt>
+ <dd>It specifies the coordinate system of content which under the immediate control of <a>user agent</a>. So to speak, it is "scrren" which <a>user agent</a> has. ("screen coordinate space" in SVGT1.2) Even if that element belongs to nested viewport coordinate system, that vector effect is always effective for change of <a>CTM</a> of the any hierarchy. If the SVG implementation is part of a <a>user agent</a> which supports CSS compatible px units, it is a coordinate system on CSS pixel of rootmost content. Generally, the pixel (or dot) of a device and pixel of CSS are not always equal by influences of the zoom function which <a>user agent</a> itself has, and variation of dpi. (see <a href="http://www.w3.org/TR/css3-values/#resolution">resolution</a> [<a href="http://www.w3.org/TR/css3-values/">CSS Values and Units Module Level 3</a>]) Accordingly, this value does not specify constrained transformations toward the such a device coordinate system.</dd>
</dl>
- <p>Note: Future versions of SVG may allow ways to control the host coordinate system.</p>
+ <p>Note: Future versions of SVG may allow ways to specify the device coordinate system.</p>
+
+<h3 id="VectorEffectsCalculation">Computing the vector effects</h3>
+ <p>This section shows the list of transformation formulas regarding combinations of the values for clarification of the behavior of vector effects excluding <span class="prop-value"> non-scaling-stroke </span> which has clear implications.</p>
+ <p>Based on <a href="coords.html#NestedTransformations">Nested transformations</a> section,
+ the normal coordinate transformation formula from <a>user coordinate system</a> to <a>viewport coordinate system</a> is as follows.
+ <!-- a formula for the coordinate system of the device is as follows.-->
+ </p>
+
+ <div role="math" aria-describedby="math-ve-defctm">
+ <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+ <mtable columnalign='left' linebreak='true'>
+ <mtr>
+ <mtd>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo>=</mo>
+ <mtext mathsize='big'>CTM</mtext>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>userspace</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>userspace</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <cn>
+ <mtext mathsize='big'>CTM</mtext>
+ </cn>
+ <mo>=</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>a</mi>
+ <mi>ctm</mi>
+ </msub>
+ </mtd>
+ <mtd>
+ <msub>
+ <mi>c</mi>
+ <mi>ctm</mi>
+ </msub>
+ </mtd>
+ <mtd>
+ <msub>
+ <mi>e</mi>
+ <mi>ctm</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>b</mi>
+ <mi>ctm</mi>
+ </msub>
+ </mtd>
+ <mtd>
+ <msub>
+ <mi>d</mi>
+ <mi>ctm</mi>
+ </msub>
+ </mtd>
+ <mtd>
+ <msub>
+ <mi>f</mi>
+ <mi>ctm</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ </mtd>
+ </mtr>
+ </mtable>
+ </math>
+ </div>
+
+ <!--
+ <p>Here, [DPR] is <a href="http://dev.w3.org/csswg/cssom-view/#dom-window-devicepixelratio">Device Pixel Ratio</a> (in scalar). And [BCM] presupposes that it is a matrix synthesizing the coordinate transformation by Browser Chrome's built-in zooming panning functions. Hereafter, x(<a href="intro.html#TermUserSpace">userspace</a>), y(<a href="intro.html#TermUserSpace">userspace</a>) is abbreviated as x, y.
+ </p>
+ -->
+
+<pre class='xml'>
+<circle vector-effect="<var>veValue</var>" transform="translate(<var>x<sub>o</sub></var> <var>y<sub>o</sub></var>)" cx="<var>x<sub>f</sub></var>" cy="<var>y<sub>f</sub></var>" r=".."/>
+</pre>
+
+ <p>When the <a><span class="prop-name">'vector-effect'</span></a> is added to an element like the above, the transformation formula for user coordinate to the device coordinate changes as follows. Here, <var>x<sub>f</sub></var> and <var>y<sub>f</sub></var> are user coordinate of the corresponding element and its descendant. And, <var>x<sub>o</sub></var> and <var>y<sub>o</sub></var> are matrix element <var>e</var> and <var>f</var> of the transform attribute which the corresponding element has. In addition, <b>|det(CTM)|</b> is absolute value of the determinants of <a>CTM</a>. When this value becomes 0 and <span class="prop-value">non-scaling-size</span> is appointed, <a><span class="prop-name">'vector-effect'</span></a> becomes invalidity namely <span class="prop-value">none</span>.
+ </p>
+
+<div role="math" aria-describedby="math-ve-determinant">
+<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+ <mrow>
+ <mrow>
+ <mtext>det</mtext>
+ <mfenced open = '(' close = ')'>
+ <mtext mathsize='big'>CTM</mtext>
+ </mfenced>
+ </mrow>
+ <mo>=</mo>
+ <cn>
+ <msub>
+ <mi>a</mi>
+ <mi>ctm</mi>
+ </msub>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <msub>
+ <mi>d</mi>
+ <mi>ctm</mi>
+ </msub>
+ <mo lspace='2px' rspace='2px'>-</mo>
+ <msub>
+ <mi>b</mi>
+ <mi>ctm</mi>
+ </msub>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <msub>
+ <mi>c</mi>
+ <mi>ctm</mi>
+ </msub>
+ </cn>
+ </mrow>
+</math>
+</div>
+
+
+<table class="propdef attrdef">
+ <tr>
+ <th>veValue</th>
+ <th>Formula</th>
+ </tr>
+ <tr>
+ <td><span class="prop-value">non-scaling-size</span></td>
+ <td>
+ <div role="math" aria-describedby="math-ve-non-scaling-size-single">
+ <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+ <mrow>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo>=</mo>
+ <mrow>
+ <mtext mathsize='big'>CTM</mtext>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <mtext>0</mtext>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mtext>0</mtext>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo lspace='2px' rspace='2px'>+</mo>
+ <mfrac>
+ <mtext mathsize='big'>CTM</mtext>
+ <msqrt>
+ <mfenced open = '|' close = '|'>
+ <mrow>
+ <mtext>det</mtext>
+ <mfenced open = '(' close = ')'>
+ <mtext mathsize='big'>CTM</mtext>
+ </mfenced>
+ </mrow>
+ </mfenced>
+ </msqrt>
+ </mfrac>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>f</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>f</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ </mrow>
+ </mrow>
+ </math>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td><span class="prop-value">non-rotation</span></td>
+ <td>
+ <div role="math" aria-describedby="math-ve-non-rotation-single">
+ <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+ <mrow>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo>=</mo>
+ <mrow>
+ <mtext mathsize='big'>CTM</mtext>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <mtext>0</mtext>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mtext>0</mtext>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo lspace='2px' rspace='2px'>+</mo>
+ <msqrt>
+ <mfenced open = '|' close = '|'>
+ <mrow>
+ <mtext>det</mtext>
+ <mfenced open = '(' close = ')'>
+ <mtext mathsize='big'>CTM</mtext>
+ </mfenced>
+ </mrow>
+ </mfenced>
+ </msqrt>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>f</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>f</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ </mrow>
+ </mrow>
+ </math>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td><span class="prop-value">non-scaling-size</span> <span class="prop-value">non-rotation</span></td>
+ <td>
+ <div role="math" aria-describedby="math-ve-non-scaling-size-non-rotation-single">
+ <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+ <mrow>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo>=</mo>
+ <mrow>
+ <mtext mathsize='big'>CTM</mtext>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <mtext>0</mtext>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mtext>0</mtext>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo lspace='2px' rspace='2px'>+</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>f</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>f</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ </mrow>
+ </mrow>
+ </math>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td><span class="prop-value">fixed-position</span></td>
+ <td>
+ <div role="math" aria-describedby="math-ve-fixed-position-single">
+ <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+ <mrow>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo>=</mo>
+ <mrow>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>o</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>o</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo>+</mo>
+ <mtext mathsize='big'>CTM</mtext>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>f</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>f</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ </mrow>
+ </mrow>
+ </math>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td><span class="prop-value">fixed-position</span> <span class="prop-value">non-scaling-size</span></td>
+ <td>
+ <div role="math" aria-describedby="math-ve-fixed-position-non-scaling-size-single">
+ <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+ <mrow>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo>=</mo>
+ <mrow>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>o</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>o</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo>+</mo>
+ <mfrac>
+ <mtext mathsize='big'>CTM</mtext>
+ <msqrt>
+ <mfenced open = '|' close = '|'>
+ <mrow>
+ <mtext>det</mtext>
+ <mfenced open = '(' close = ')'>
+ <mtext mathsize='big'>CTM</mtext>
+ </mfenced>
+ </mrow>
+ </mfenced>
+ </msqrt>
+ </mfrac>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>f</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>f</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ </mrow>
+ </mrow>
+ </math>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td><span class="prop-value">fixed-position</span> <span class="prop-value">non-rotation</span></td>
+ <td>
+ <div role="math" aria-describedby="math-ve-fixed-position-non-rotation-single">
+ <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+ <mrow>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo>=</mo>
+ <mrow>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>o</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>o</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo>+</mo>
+ <msqrt>
+ <mfenced open = '|' close = '|'>
+ <mrow>
+ <mtext>det</mtext>
+ <mfenced open = '(' close = ')'>
+ <mtext mathsize='big'>CTM</mtext>
+ </mfenced>
+ </mrow>
+ </mfenced>
+ </msqrt>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>f</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>f</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ </mrow>
+ </mrow>
+ </math>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td><span class="prop-value">fixed-position</span> <span class="prop-value">non-scaling-size</span> <span class="prop-value">non-rotation</span></td>
+ <td>
+ <div role="math" aria-describedby="math-ve-fixed-position-non-scaling-size-non-rotation-single">
+ <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+ <mrow>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo>=</mo>
+ <mrow>
+ <mrow>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>o</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>o</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ </mrow>
+ <mo>+</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ <mtd>
+ <mn>0</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>f</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>f</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ </mrow>
+ </mrow>
+ </math>
+ </div>
+ </td>
+ </tr>
+</table>
+
+<h3 id="NestedVectorEffectsCalculation">Computing the vector effects for nested viewport coordinate systems</h3>
+<p>Below is normal coordinate transformation formula for nested viewport coordinate systems without vector effects. <b>x<sub>viewport(UA)</sub></b> and <b>y<sub>viewport(UA)</sub></b> are coordinates which under the immediate control of <a>user agent</a>. <b>CTM<sub>this</sub></b> is <a>CTM</a> for the transformation matrix from <a>user coordinate system</a> of an target graphic to <a>viewport coordinate system</a> to which it belongs. <b>CTM<sub>parent</sub></b> is <a>CTM</a> for the transformation matrix from aforementioned <a>viewport coordinate system</a> to <a>viewport coordinate system</a> of the parent of that. And, <b>CTM<sub>root</sub></b> is <a>CTM</a> for rootmost viewport coordinate system (UA).</p>
+
+<div role="math" aria-describedby="math-ve-nested-transform">
+<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+ <mrow>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>viewport(UA)</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>viewport(UA)</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo>=</mo>
+ <msub>
+ <mtext mathsize='big'>CTM</mtext>
+ <mi>root</mi>
+ </msub>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <cn>...</cn>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <msub>
+ <mtext mathsize='big'>CTM</mtext>
+ <mi>parent</mi>
+ </msub>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <msub>
+ <mtext mathsize='big'>CTM</mtext>
+ <mi>this</mi>
+ </msub>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>userspace</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>userspace</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ </mrow>
+</math>
+</div>
+<p>
+When applying seven formulas of the preceding section to nested viewport coordinate systems, the application way of those formulas changes as follows by whether <span class="prop-value">viewport</span> or <span class="prop-value">screen</span> is specified as the additional value of <a><span class="prop-name">'vector-effect'</span></a>.
+</p>
+<p>
+When <span class="prop-value">viewport</span> value is specified, <a>user agent</a> computes coordinates combining either of seven formulas of the preceding chapter, and the following formulas.
+</p>
+
+<div role="math" aria-describedby="math-ve-viewport">
+<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+ <mtable columnalign='left' linebreak='true'>
+ <mtr>
+ <mtd>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mrow>
+ <mi>viewport</mi>
+ <mo stretchy='false'>(</mo>
+ <mi>UA</mi>
+ <mo stretchy='false'>)</mo>
+ </mrow>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mrow>
+ <mi>viewport</mi>
+ <mo stretchy='false'>(</mo>
+ <mi>UA</mi>
+ <mo stretchy='false'>)</mo>
+ </mrow>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo>=</mo>
+ <msub>
+ <mtext mathsize='big'>CTM</mtext>
+ <mtext>root</mtext>
+ </msub>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mtext>...</mtext>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <msub>
+ <mtext mathsize='big'>CTM</mtext>
+ <mtext>parent</mtext>
+ </msub>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mtext mathsize='big'>CTM</mtext>
+ <mo>=</mo>
+ <msub>
+ <mtext mathsize='big'>CTM</mtext>
+ <mtext>this</mtext>
+ </msub>
+ </mtd>
+ </mtr>
+ </mtable>
+</math>
+</div>
+
+<p>
+When <span class="prop-value">screen</span> value is specified, <a>user agent</a> computes coordinates combining either of seven formulas of the preceding chapter, and the following formulas.
+</p>
+
+<div role="math" aria-describedby="math-ve-screen">
+<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+ <mtable columnalign='left' linebreak='true'>
+ <mtr>
+ <mtd>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mrow>
+ <mi>viewport</mi>
+ <mo stretchy='false'>(</mo>
+ <mi>UA</mi>
+ <mo stretchy='false'>)</mo>
+ </mrow>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mrow>
+ <mi>viewport</mi>
+ <mo stretchy='false'>(</mo>
+ <mi>UA</mi>
+ <mo stretchy='false'>)</mo>
+ </mrow>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ <mo>=</mo>
+ <mfenced open = '[' close = ']'>
+ <mtable rowalign='center'>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>x</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <msub>
+ <mi>y</mi>
+ <mi>viewport</mi>
+ </msub>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mn>1</mn>
+ </mtd>
+ </mtr>
+ </mtable>
+ </mfenced>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mtext mathsize='big'>CTM</mtext>
+ <mo>=</mo>
+ <msub>
+ <mtext mathsize='big'>CTM</mtext>
+ <mtext>root</mtext>
+ </msub>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <mtext>...</mtext>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <msub>
+ <mtext mathsize='big'>CTM</mtext>
+ <mtext>parent</mtext>
+ </msub>
+ <mo lspace='2px' rspace='2px'>⋅</mo>
+ <msub>
+ <mtext mathsize='big'>CTM</mtext>
+ <mtext>this</mtext>
+ </msub>
+ </mtd>
+ </mtr>
+ </mtable>
+</math>
+</div>
- <p>Below is an example of the non-scaling-stroke <a href="#VectorEffectProperty"><span class="prop-name">'vector-effect'</span></a>.</p>
+<h3 id="VectorEffectsExamples">Examples of vector effects</h3>
+
+<div class="example">
+ <p>Below is an example of the <span class="prop-value">non-scaling-stroke</span> <a><span class="prop-name">'vector-effect'</span></a>.</p>
<edit:includefile href='images/painting/non-scaling-stroke.svg' link="yes" image="yes"/>
+</div>
+
+<div class="example">
+ <p>Below is an example of the <span class="prop-value">none</span> <a><span class="prop-name">'vector-effect'</span></a> (no vector effect).</p>
+ <table>
+ <tr><td>Before changing CTM</td><td>After changing CTM</td></tr>
+ <tr><td>
+ <img class="bordered" src="images/painting/vectorEffects/ve-initial.svg" alt="Image showing none vector effect"/>
+ </td><td>
+ <img class="bordered" src="images/painting/vectorEffects/ve-none.svg" alt="Image showing none vector effect"/>
+ </td></tr>
+ </table>
+
+ <p>Source code </p>
+ <div>
+ <pre><![CDATA[
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50,-50,500,500" height="500" width="500">
+
+ <rect x="-50" y="-50" width="500" height="500" stroke="orange" stroke-width="3" fill="none"></rect>
+
+ <!-- Nested user space is transformed by this transform attribute -->
+ <g id="base" transform="matrix(2.1169438081370817,0.3576047954311102,-0.3576047954311102,1.4700998667618626,0,0) translate(-50,-50)">
+ <svg viewBox="-50,-50,500,500" height="500" width="500">
+ <!-- Graph paper on the this svg's base user space -->
+ <g stroke="green" stroke-width="1" fill="none">
+ <circle cx="0" cy="0" r="10"></circle>
+ <circle cx="150" cy="150" r="7"></circle>
+ <path fill="green" stroke="none" d="M0,-3 L30,-3 25,-10 50,0 25,10 30,3 0,3z"></path>
+
+ <line x1="-100" y1="-100" x2="600" y2="-100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="000" x2="600" y2="000"></line>
+ <line x1="-100" y1="100" x2="600" y2="100" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="200" x2="600" y2="200" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="300" x2="600" y2="300" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="400" x2="600" y2="400" stroke-dasharray="5,5"></line>
+ <line x1="-100" y1="500" x2="600" y2="500" stroke-dasharray="5,5"></line>
+
+ <line y1="-100" x1="-100" y2="600" x2="-100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="000" y2="600" x2="000"></line>
+ <line y1="-100" x1="100" y2="600" x2="100" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="200" y2="600" x2="200" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="300" y2="600" x2="300" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="400" y2="600" x2="400" stroke-dasharray="5,5"></line>
+ <line y1="-100" x1="500" y2="600" x2="500" stroke-dasharray="5,5"></line>
+ </g>
+
+ <!-- Figure having vector effect -->
+ <!-- An thick red right arrow and small rectangle on this figure's nested user space origin -->
+ <path id="ve" vector-effect="none" stroke="red" stroke-width="3" fill="none" transform="matrix(1,0,0,1,150,150)" d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"></path>
+ </svg>
+ </g>
+</svg>
+]]></pre>
+ </div>
+</div>
+
+<div class="example">
+ <p>Below is an example of the <span class="prop-value">non-scaling-size</span>.</p>
+ <table>
+ <tr><td>Before changing CTM</td><td>After changing CTM</td></tr>
+ <tr><td>
+ <img class="bordered" src="images/painting/vectorEffects/ve-initial.svg" alt="Image showing appearance before the effect of the vector effect showing up"/>
+ </td><td>
+ <img class="bordered" src="images/painting/vectorEffects/ve-nonScalingSize.svg" alt="Image showing non-scaling-size vector effect"/>
+ </td></tr>
+ </table>
+
+ <pre><![CDATA[<path id="ve" vector-effect="non-scaling-size" stroke="red" stroke-width="3" fill="none" transform="matrix(1,0,0,1,150,150)" d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>]]></pre>
+</div>
+
+<div class="example">
+ <p>Below is an example of the <span class="prop-value">non-rotation</span>.</p>
+ <table>
+ <tr><td>Before changing CTM</td><td>After changing CTM</td></tr>
+ <tr><td>
+ <img class="bordered" src="images/painting/vectorEffects/ve-initial.svg" alt="Image showing appearance before the effect of the vector effect showing up"/>
+ </td><td>
+ <img class="bordered" src="images/painting/vectorEffects/ve-nonRotation.svg" alt="Image showing non-rotation vector effect"/>
+ </td></tr>
+ </table>
+
+ <pre><![CDATA[<path id="ve" vector-effect="non-rotation" stroke="red" stroke-width="3" fill="none" transform="matrix(1,0,0,1,150,150)" d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>]]></pre>
+</div>
+
+<div class="example">
+ <p>Below is an example of the <span class="prop-value">non-scaling-size</span> <span class="prop-value">non-rotation</span>.</p>
+ <table>
+ <tr><td>Before changing CTM</td><td>After changing CTM</td></tr>
+ <tr><td>
+ <img class="bordered" src="images/painting/vectorEffects/ve-initial.svg" alt="Image showing appearance before the effect of the vector effect showing up"/>
+ </td><td>
+ <img class="bordered" src="images/painting/vectorEffects/ve-nonScalingSize-nonRotation.svg" alt="Image showing non-scaling-size non-rotation vector effect"/>
+ </td></tr>
+ </table>
+
+ <pre><![CDATA[<path id="ve" vector-effect="non-scaling-size non-rotation" stroke="red" stroke-width="3" fill="none" transform="matrix(1,0,0,1,150,150)" d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>]]></pre>
+</div>
+
+<div class="example">
+ <p>Below is an example of the <span class="prop-value">fixed-position</span>.</p>
+ <table>
+ <tr><td>Before changing CTM</td><td>After changing CTM</td></tr>
+ <tr><td>
+ <img class="bordered" src="images/painting/vectorEffects/ve-initial.svg" alt="Image showing appearance before the effect of the vector effect showing up"/>
+ </td><td>
+ <img class="bordered" src="images/painting/vectorEffects/ve-fixedPosition.svg" alt="Image showing fixed-position vector effect"/>
+ </td></tr>
+ </table>
+
+ <pre><![CDATA[<path id="ve" vector-effect="fixed-position" stroke="red" stroke-width="3" fill="none" transform="matrix(1,0,0,1,150,150)" d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>]]></pre>
+</div>
+
+<div class="example">
+ <p>Below is an example of the <span class="prop-value">non-scaling-size</span> <span class="prop-value">fixed-position</span>.</p>
+ <table>
+ <tr><td>Before changing CTM</td><td>After changing CTM</td></tr>
+ <tr><td>
+ <img class="bordered" src="images/painting/vectorEffects/ve-initial.svg" alt="Image showing appearance before the effect of the vector effect showing up"/>
+ </td><td>
+ <img class="bordered" src="images/painting/vectorEffects/ve-nonScalingSize-fixedPosition.svg" alt="Image showing non-scaling-size fixed-position vector effect"/>
+ </td></tr>
+ </table>
+
+ <pre><![CDATA[<path id="ve" vector-effect="non-scaling-size fixed-position" stroke="red" stroke-width="3" fill="none" transform="matrix(1,0,0,1,150,150)" d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>]]></pre>
+</div>
+
+<div class="example">
+ <p>Below is an example of the <span class="prop-value">non-rotation</span> <span class="prop-value">fixed-position</span>.</p>
+ <table>
+ <tr><td>Before changing CTM</td><td>After changing CTM</td></tr>
+ <tr><td>
+ <img class="bordered" src="images/painting/vectorEffects/ve-initial.svg" alt="Image showing appearance before the effect of the vector effect showing up"/>
+ </td><td>
+ <img class="bordered" src="images/painting/vectorEffects/ve-nonRotation-fixedPosition.svg" alt="Image showing non-rotation fixed-position vector effect"/>
+ </td></tr>
+ </table>
+
+ <pre><![CDATA[<path id="ve" vector-effect="non-rotation fixed-position" stroke="red" stroke-width="3" fill="none" transform="matrix(1,0,0,1,150,150)" d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>]]></pre>
+</div>
+
+<div class="example">
+ <p>Below is an example of the <span class="prop-value">non-scaling-size</span> <span class="prop-value">non-rotation</span> <span class="prop-value">fixed-position</span>.</p>
+ <table>
+ <tr><td>Before changing CTM</td><td>After changing CTM</td></tr>
+ <tr><td>
+ <img class="bordered" src="images/painting/vectorEffects/ve-initial.svg" alt="Image showing appearance before the effect of the vector effect showing up"/>
+ </td><td>
+ <img class="bordered" src="images/painting/vectorEffects/ve-nonScalingSize-nonRotation-fixedPosition.svg" alt="Image showing non-scaling-size non-rotation fixed-position vector effect"/>
+ </td></tr>
+ </table>
+
+ <pre><![CDATA[<path id="ve" vector-effect="non-scaling-size non-rotation fixed-position" stroke="red" stroke-width="3" fill="none" transform="matrix(1,0,0,1,150,150)" d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>]]></pre>
+</div>
<h2 id="Markers">Markers</h2>
============================================================
/home/svgwg/bin/node "/home/svgwg/svgwg.org/git/svgwg/tools/publish/publish.js" --list-pages
/home/svgwg/bin/node "/home/svgwg/svgwg.org/git/svgwg/tools/publish/publish.js" --build Overview toc intro concepts render types struct styling layout coords paths shapes text embedded painting color pservers masking filters interact linking script animate metadata backward extend svgdom idl implnote conform access i18n minimize refs eltindex attindex propidx idlindex feature mimereg changes
/home/svgwg/bin/node "/home/svgwg/svgwg.org/git/svgwg/tools/publish/publish.js" --build-single-page
Received on Friday, 10 October 2014 11:10:28 UTC