Full version, Basic version

Specification link: 4.3 Basic DOM interfaces

text-tspan-01-b ← index → animate-elem-02-t

# types-basicDOM-01-b
SVG Image | PNG Image
types-basicDOM-01-b.svg function testSVGLocatable() { var rotText = document.getElementById("rotatedText"); var redCircle = document.getElementById("redCircle") var matr = rotText.getScreenCTM(); document.getElementById("result1").firstChild.nodeValue = ".getScreenCTM(): " + matr.a.toFixed(2) + "," + matr.b.toFixed(2) + "," + matr.c.toFixed(2) + "," + matr.d.toFixed(2) + "," + matr.e.toFixed(2) + "," + matr.f.toFixed(2); var matr = rotText.getCTM(); document.getElementById("result2").firstChild.nodeValue = ".getCTM(): " + matr.a.toFixed(2) + "," + matr.b.toFixed(2) + "," + matr.c.toFixed(2) + "," + matr.d.toFixed(2) + "," + matr.e.toFixed(2) + "," + matr.f.toFixed(2); var matr = rotText.getTransformToElement(document.getElementById("parentGroup")); document.getElementById("result3").firstChild.nodeValue = ".getTransformToElement(): " + matr.a.toFixed(2) + "," + matr.b.toFixed(2) + "," + matr.c.toFixed(2) + "," + matr.d.toFixed(2) + "," + matr.e.toFixed(2) + "," + matr.f.toFixed(2); var bbox = redCircle.getBBox(); document.getElementById("result4").firstChild.nodeValue = ".getBBox() for 'redCircle': .x="+bbox.x+",.y="+bbox.y+",.width="+bbox.width+",.height="+bbox.height; document.getElementById("result5").firstChild.nodeValue = ".farthestViewportElement of redCircle="+redCircle.farthestViewportElement.getAttributeNS(null,"id"); document.getElementById("result6").firstChild.nodeValue = ".nearestViewportElement of redCircle="+redCircle.nearestViewportElement.getAttributeNS(null,"id"); } Rotated Text for testing SVGLocatable Some other text with id 'otherText' $Revision: 1.1 $ |

This test checks all the methods and properties of the SVGLocatable interface. Note the use of nested svg elements and testing against different elements in the hierarchy. Note that the values of .getScreenCTM() and .getCTM() can only be tested correctly if they are in the html-based test or the width and height of the root element is explicitly set to 480x360. The methods .getScreenCTM() and .getCTM() are tested from the rotated text element, the method .getBBox(), .getTransformToElement() is tested between the rotated text and its parent group, the method .getBBox() and the properties .farthestViewportElement and .nearestViewportElement are tested on the red circle.

For the test to pass, the values generated by script must match the values provided in the png image. The correct values are:

.getScreenCTM() for id "rotText": 0.42,0.42,-0.42,0.42,70.00,-60.00

.getCTM() for id "rotText": 0.42,0.42,-0.42,0.42,70.00,-60.00

.getTransformToElement() between id "rotText" and id "parentGroup": 0.42,0.42,-0.42,0.42,0.00,0.00

.getBBox() for 'redCircle': .x=-50,.y=-50,.width=100,.height=100

.farthestViewportElement of redCircle=svg-root

.nearestViewportElement of redCircle=nestedSVG

text-tspan-01-b ← index → animate-elem-02-t