SVG height incorrectly calculated in Webkit browsers

Question

I have a issue specific to Webkit browsers (Safari & Chrome, on Mac & PC).

I\'m using Raphael JS to render SVG data and using a responsive layout to scale th

Answer 1

It's hard for me to understand exactly what you want with your example, or what is not as you intend it. However, in general, if you are using a layout with percentage widths and height containers and you want content to fill those containers, you need to take them out of the flow (using position:absolute on the content and position:relative or position:absolute on the containers).

Here's a simple example that works find in Chrome and Safari:
http://phrogz.net/SVG/size-to-fill.xhtml

The #foo div has its height and width as a percentage of the body. It has a red background that will never be seen because the SVG is position:absolute inside it and set to fill it completely, and have a green background. If you ever see red, it is an error.

#foo, svg { position:absolute }
#foo { left:20%; width:30%; top:5%; height:80%; background:red; }
svg  { top:0; left:0; width:100%; height:100%;  background:green; }

<div id="foo"><svg ...></svg></div>

Answer 2

svg { max-height: 100%; }

WebKit bug documented here: https://bugs.webkit.org/show_bug.cgi?id=82489

I also added the workaround to the bug tracker.

Answer 3

I had a similar problem for Safari. Case was that the svg width and height were rendered as dom element attributes (in my case width="588.75px" height="130px"). Defining width and height in css could not overwrite this dimension setting.

To fix this for Safari I removed the width and height information from the SVG file while keeping viewBox intact (you can edit .svg files with any text editor).

Git diff snippet of my .svg file:

    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 588.75 130"
-   height="130"
-   width="588.75"
    xml:space="preserve"
    version="1.1"