block by nitaku 8745933

SVG text bounding box (with transform)

Full Screen

Same as the previous example, the bounding box of an SVG text element is used to highlight it with a yellow rectangle.

This time, the functionality is implemented with SVG transforms. The text is translated to its position, getBBox() is used in combination with getCTM() to obtain the original bounding box and the transformation matrix respectively. Then, the rect is created as before, but in addition the read transformation matrix is applied to it (see this StackOverflow post for more info).

(By reading the provided link on getBBox() pointing to the W3C spec, I got the impression that getBBox() should have returned the bounding box after the transform. I don’t know if I am getting it wrong, but at least on Chrome 32 getCTM() is needed to make it work.)

index.js

index.html

index.coffee

index.css

index.sass