How do I scale a linked image inside an SVG from t

Question

I have an image linked in an inline SVG, the SVG has the height and width values removed. The image seems to disappear when dimension options are set to percent so I've kept them at px value, which is what the SVG seems to be keep as its height.

This link will demonstrate what I'm trying to achieve much easier: example

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

Thanks,

-n

Answer 1

Looks like all you have to do is add

svg {
  max-height:100%;
}

to your CSS.

Answer 2

This is a webkit bug. See

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

for some possible solutions.