How to scale a linked image inside SVG from above (currently scaling from the center is weird)

Question

I have an image related to embedded SVG, SVG has height and width values. The image seems to disappear when the measurement parameters are set in percent, so I saved them at a px value, which, apparently, corresponds to the SVG in height.

This link will demonstrate what I'm trying to achieve is much simpler: an example

Basically, I want the SVG to behave like the image above it, but the linked image is scaled from the center of its SVG container, and not from the top.

Thanks,

-n

Answer 1

Looks like all you have to do is add

svg { max-height:100%; } 

into your CSS.

Answer 2

This is a web kit error. Cm

Using svg with width = 100 and height = 100 I got extra space in Safari e chrome

for some possible solutions.