| <?xml version="1.0" encoding="UTF-8"?> |
| |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN" "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd" > |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --><!-- ====================================================================== --> |
| <!-- Modification of a polygon attributes --> |
| <!-- --> |
| <!-- @author nicolas.socheleau@bitflash.com --> |
| <!-- @version $Id$ --> |
| <!-- ====================================================================== --> |
| <?xml-stylesheet type="text/css" href="../../resources/style/test.css" ?> |
| |
| <svg width="450" viewBox="0 0 450 500" height="500" id="body"> |
| <title>SVGTransformable.transform 'onload'</title> |
| |
| <text x="50%" y="45" class="title">SVGTransformable.transform in 'onload' |
| </text> |
| <script type="text/ecmascript"><![CDATA[ |
| function translate(evt,x,y) |
| { |
| var elt = evt.target; |
| ma = elt.ownerDocument.documentElement.createSVGMatrix(); |
| ma = ma.translate(x,y); |
| tr = elt.transform.baseVal.createSVGTransformFromMatrix(ma); |
| nb = elt.transform.baseVal.initialize(tr); |
| var text = elt.ownerDocument.getElementById('test1_text'); |
| text.firstChild.appendData(" ( type = "+nb.type+")"); |
| } |
| function rotate(evt,a,x,y) |
| { |
| var elt = evt.target; |
| ma = elt.ownerDocument.documentElement.createSVGMatrix(); |
| ma = ma.translate(x, y); |
| ma = ma.rotate(a); |
| ma = ma.translate(-x, -y); |
| tr = elt.transform.baseVal.createSVGTransformFromMatrix(ma); |
| nb = elt.transform.baseVal.initialize(tr); |
| var text = elt.ownerDocument.getElementById('test2_text'); |
| text.firstChild.appendData(" ( type = "+nb.type+")"); |
| } |
| function skewX(evt,x) |
| { |
| var elt = evt.target; |
| ma = elt.ownerDocument.documentElement.createSVGMatrix(); |
| ma = ma.skewX(x); |
| tr = elt.transform.baseVal.createSVGTransformFromMatrix(ma); |
| nb = elt.transform.baseVal.initialize(tr); |
| var text = elt.ownerDocument.getElementById('test3_text'); |
| text.firstChild.appendData("( type = "+nb.type+")"); |
| } |
| function skewY(evt,y) |
| { |
| var elt = evt.target; |
| ma = elt.ownerDocument.documentElement.createSVGMatrix(); |
| ma = ma.skewY(y); |
| tr = elt.transform.baseVal.createSVGTransformFromMatrix(ma); |
| nb = elt.transform.baseVal.initialize(tr); |
| var text = elt.ownerDocument.getElementById('test4_text'); |
| text.firstChild.appendData(" ( type = "+nb.type+")"); |
| } |
| function scale(evt,x,y) |
| { |
| var elt = evt.target; |
| tr = elt.ownerDocument.documentElement.createSVGTransform(); |
| tr.setScale(x,y); |
| nb = elt.transform.baseVal.initialize(tr); |
| var text = elt.ownerDocument.getElementById('test5_text'); |
| text.firstChild.appendData(" ( type = "+nb.type+")"); |
| } |
| function matrix(evt,a,b,c,d,e,f) |
| { |
| var elt = evt.target; |
| matrix = elt.ownerDocument.documentElement.createSVGMatrix(); |
| matrix.a = a; |
| matrix.b = b; |
| matrix.c = c; |
| matrix.d = d; |
| matrix.e = e; |
| matrix.f = f; |
| tr = elt.ownerDocument.documentElement.createSVGTransform(); |
| tr.setMatrix(matrix); |
| nb = elt.transform.baseVal.initialize(tr); |
| var text = elt.ownerDocument.getElementById('test6_text'); |
| text.firstChild.appendData(" ( type = "+nb.type+")"); |
| } |
| ]]></script> |
| <g id="test-content" transform="matrix(1.0 0.0 0.0 1.0 -148.27586 -91.37931)"> |
| |
| <!-- onload="translate(evt)" --> |
| <text x="180" y="160" font-size="11">translate</text> |
| <rect x="175" y="175" width="50" height="50" style="opacity:0.5;fill:#eee; stroke:#aaa; stroke-width:4" |
| transform="translate(10,30)"/> |
| <rect x="175" y="175" width="50" height="50" id="test1" style="fill:gold; stroke:orange; stroke-width:4" |
| onload="translate(evt,10,30)"/> |
| <text x="160" font-size="9" y="290" id="test1_text"> |
| transform |
| </text> |
| |
| <g transform="translate(150,0)" > |
| <!-- onload="rotate(evt)" --> |
| <text x="180" y="160" font-size="11" >rotate</text> |
| <rect x="175" y="175" width="50" height="50" style="opacity:0.5;fill:#eee; stroke:#aaa; stroke-width:4" |
| transform="rotate(45,200,230)"/> |
| <rect x="175" y="175" width="50" height="50" id="test1" style="fill:gold; stroke:orange; stroke-width:4" |
| onload="rotate(evt,45,200,230)"/> |
| <text x="160" font-size="9" y="290" id="test2_text"> |
| transform |
| </text> |
| </g> |
| |
| <g transform="translate(300,0)" > |
| <!-- onload="skewX(evt)" --> |
| <text x="180" y="160" font-size="11" >skewX</text> |
| <rect x="175" y="175" width="50" height="50" style="opacity:0.5;fill:#eee; stroke:#aaa; stroke-width:4" |
| transform="skewX(10)"/> |
| <rect x="175" y="175" width="50" height="50" id="test1" style="fill:gold; stroke:orange; stroke-width:4" |
| onload="skewX(evt,10)"/> |
| <text x="160" font-size="9" y="290" id="test3_text"> |
| transform |
| </text> |
| </g> |
| |
| <g transform="translate(0,150)" > |
| <!-- onload="skewY(evt)" --> |
| <text x="180" y="160" font-size="11" >skewY</text> |
| <rect x="175" y="175" width="50" height="50" style="opacity:0.5;fill:#eee; stroke:#aaa; stroke-width:4" |
| transform="skewY(5)"/> |
| <rect x="175" y="175" width="50" height="50" id="test1" style="fill:gold; stroke:orange; stroke-width:4" |
| onload="skewY(evt,5)"/> |
| |
| <text x="160" font-size="9" y="290" id="test4_text"> |
| transform |
| </text> |
| </g> |
| |
| <g transform="translate(150,150)" > |
| <!-- onload="scale(evt)" --> |
| <text x="180" y="160" font-size="11" >scale</text> |
| <rect x="175" y="175" width="50" height="50" style="opacity:0.5;fill:#eee; stroke:#aaa; stroke-width:4" |
| transform="scale(0.9,1.1)"/> |
| <rect x="175" y="175" width="50" height="50" id="test1" style="fill:gold; stroke:orange; stroke-width:4" |
| onload="scale(evt,0.9,1.1)"/> |
| |
| <text x="160" font-size="9" y="290" id="test5_text"> |
| transform |
| </text> |
| </g> |
| |
| <g transform="translate(300,150)" > |
| <!-- onload="matrix(evt)" --> |
| <text x="180" y="160" font-size="11" >matrix</text> |
| <rect x="175" y="175" width="50" height="50" style="opacity:0.5;fill:#eee; stroke:#aaa; stroke-width:4" |
| transform="matrix(0.4,0.9,-0.9,0.4,328,-46)"/> |
| <rect x="175" y="175" width="50" height="50" id="test1" style="fill:gold; stroke:orange; stroke-width:4" |
| onload="matrix(evt,0.4,0.9,-0.9,0.4,328,-46)"/> |
| |
| <text x="160" font-size="9" y="290" id="test6_text"> |
| transform |
| </text> |
| </g> |
| |
| |
| </g> |
| </svg> |
