How to find the size of padding added by SVG preserveAspectRatio

112 views Asked by At

Given an image that is centered by SVG preserveAspectRatio, how do I find out how much padding it was added around the image to center it?

I need to superimpose some other image on top of an existing image that was centered with preserveAspectRatio: xMidYMid. Unless I know what the boundaries of the image are I can't paint something on top of it.

Below is a simple example: http://jsfiddle.net/ddehghan/zz4ppyhe/

var s = Snap("#svg");

var image = s.image('https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png', 
                0, 0, '400px', '200px')
.attr('preserveAspectRatio', "xMidYMid meet");

enter image description here

Update:

unfortunately getBBox() see: http://jsfiddle.net/zz4ppyhe/3/ does not return the position of the image but rather the blue line which includes the white space. I think this same problem exists in CSS as well. when the image is centered or moved by the underlying layers there is no interface to the the final location from Javascript.

0

There are 0 answers