0

I'm trying to get svg image to scale nicely (http://coub.com/view/5tbis) with sibling div content so that they'd look like one thing. I managed to get it working in fireforx but not in chrome and ie, all latest versions. Here is my code:

<!DOCTYPE html>
<html>

<body>
  <div style="display: flex; height: 10em;">
    <div style="height: 100%">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 100%; height: 100%; " viewBox="0 0 400 400">
        <rect x="0" y="0" width="400" height="200" fill="yellow" stroke="black" />
        <rect x="0" y="200" width="400" height="200" fill="green" stroke="black" />
        <circle cx="200" cy="200" r="100" stroke="black" stroke-width="3" fill="red" />
      </svg>
    </div>
    <div style="display: flex; flex-direction: column; width: 100%">
      <div style="flex: 1; background-color: green">&nbsp;</div>
      <div style="flex: 1; background-color: yellow">&nbsp;</div>
    </div>
  </div>

</body>

</html>

In IE and Chrome there is a blank space around svg and in Chome, svg proportions does not always match divs' ones.

Any help is highly appreciated.

UPDATE: ok, preserveAspectRatio="none" fixes the problem for ie and chrome, but I still don't understand why do they behave in this way? The wrapper div do not have width, why svg then doesn't change it according its own width?

UPDATE: preserveAspectRatio="xMidYMid slice" makes it even better, but only for ff and ie

user656449
  • 2,950
  • 2
  • 30
  • 43
  • See this if it can helpful to you: http://stackoverflow.com/questions/9777143/svg-in-img-element-proportions-not-respected-in-ie9 – The Guest Apr 07 '15 at 15:14
  • viewBox is already here, although I still don't understand what it is, removing height and width didn't help :( – user656449 Apr 07 '15 at 15:23
  • The blank space below the svg can be fixed by giving the svg `display: block`. I'm working on a solution now but I can't seem to get it working in IE because it handles the rendering of containers around SVGs differently than the other two. – Joshua Whitley Apr 07 '15 at 17:06
  • Also, do you need the aspect ratio of the SVG preserved (heigth = width - in this case)? – Joshua Whitley Apr 07 '15 at 17:07
  • Yes, apsect ration must be preserved. But, again, it seems to work with preserveAspectRatio="none" in all browsers. The only problem is that I have no idea why :) – user656449 Apr 07 '15 at 17:25
  • But if you set that setting, it isn't doing what you want. Here's an example that does what you're looking for in FF and Chrome but not IE because of how IE renders the container around the SVG: http://jsfiddle.net/zxcxwo3h/5/. The other browsers render the SVG first to get the container height. IE appears to be rendering the container first, then rendering the SVG to scale it out, causing empty space to the right and left. – Joshua Whitley Apr 07 '15 at 18:48
  • In case of FF it preserves ratio even with preserveAspectRatio="none". I've added circle to make it visible. Also pls note that fiddle you pointed to doesn't actually scale as all sizes are in %, at least in FF and Chrome. – user656449 Apr 07 '15 at 19:48
  • And your help is really great! – user656449 Apr 07 '15 at 19:48

0 Answers0