1

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

Nick Dumais
  • 128
  • 1
  • 1
  • 5

2 Answers2

1

Looks like all you have to do is add 

svg {
  max-height:100%;
}

to your CSS.

Nick Dumais
  • 128
  • 1
  • 1
  • 5
0

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.

Community
  • 1
  • 1
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Thanks for the link, I'm glad I at least have some closure on that. Do you know how the javascript solution mentioned would work? – Nick Dumais Aug 22 '13 at 15:37
  • With a window.onresize handler. Somthing like this: http://stackoverflow.com/questions/16265123/resize-svg-when-window-is-resized-in-d3-js or wrap the SVG in a div and copy the width and height from the div to the SVG on a resize. – Paul LeBeau Aug 23 '13 at 14:04