CODEWITHSUNDEEP
htmlcssinternet-explorersvg
Klaaz
Klaaz

Reputation: 1640

HTML inline SVG margins in IE

I have this html

<div class="foot">
  <svg version="1.1" id="svgfooter" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 300 91">
    <polygon id="svgpolygon" fill="#017EFF" points="0,0 300,0 300,71 150,91 0,71 "/>
  </svg>
  <div class="title">
    TEST
  </div>
</div>

With the following css

.foot {
  position:relative;
  background: #999999;
  width:350px;
}
#svgfooter {
  display:block;
  margin:0px;
  padding:0px;
  width:350px;
}
#svgpolygon {
  display:block;
  margin:0px;
}
.title {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  line-height:90px;
  height:90px;
  color: #ffffff;
  text-align: center;
  font-size:24px;
}

I want to position the TEST text over the SVG by absolutely positioning the relevant div over the SVG. The whole shabang should be responsive. So far so good, it works perfect in Firefix, Chrome and Safari but not in IE.

IE shows big top and bottom margins for the SVG. The title is positioned well. I cannot remove these margins.

What is the issue here? Can't it be done in IE?

Codepen

Upvotes: 0

Views: 2605

Answers (3)

saeid tabrizi
saeid tabrizi

Reputation: 1

ghosts control the svg design world behind the adobe illustrator and inkscape and contrariness svg developers if root of tree be patient.

so It is strongly recommended that you design from scratch in the illustrator or inkscape and dont exchange between them.

i prefer inkscape bacause svg effects supported inside the inkscape.

extra padding area in IE despite using padding-bottom hack on the container element is result of design mistakes at first step.

always after opening your design(maybe you trace a bitmap logo to vector path) file(mysample.svg) in the adobe illustrator or inkscape and ctrl+n then cut svg shapes from svg file and paste them in the newly created file. then select in the illustrator: object> artboards > fit to artword bounds

or in the inkscape select: edit properties of this document >and from custom size area select button captioned: resize page to drawing or selection

Upvotes: 0

MichaelClark
MichaelClark

Reputation: 1212

preserveAspectRatio="xMidYMin meet" is a default and usually not needed,...IE has some bad habits though, but this did not solve my problem, neither did removing height and width from the SVG which I was doing anyway.

What I've run into recently is IE 10/11 not scaling an SVG to fit it's container, it would pick it's own default height and that would be the render size, other browsers are fine simply setting:

svg{width:100%}

But IE has a heart of stone. My use case is odd,...and may not be for everyone, here's the preamble.

  • I don't care about anything lower than IE 10. Let the devil have the hindmost.

  • I use alot of SVG files and exclusively inline. But I may or may not know about them in advance, but they are all contained in a div. So, I needed a general solution, not a specific one.

  • Everything must be responsive.

So, I made this little jquery script and CSS rule and so far it's doing what I need:

.svgfix{height:0 !important;position:relative !important;}

$(function(){
    if(!!navigator.userAgent.match(/Trident\/7\./)){
        $('svg').each(function(e){
            var box = $(this)[0].getAttribute('viewBox').split(' ');
            var con = $(this).parent();
            con.addClass('svgfix').css('padding-top', ((con.width() / box[2]) * box[3])+'px');
            $(this).css({'position':'absolute','top':'0','left':'0'});
        });
    }
});

Basically, a fairly small CSS class whose size I can tolerate as a static rule. Jquery checks for IE, then iterates over SVG files, gets the viewBox dimensions to preserve the aspect ratio according to it's parent container. A bit of algebra, then applies the height as padding from the hack explained in this excellent article:

http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/

Basically the hack is to collapse the parent's height, and use padding instead. And setting relative and absolute positions. My math ended up being a little different, I went with pixels instead of percent. That may be something for me to revisit,...but it got my buns out of the fire on a Friday and works pretty good so far.

Lastly,...the !important may not be necessary for your application; with mine, I did need to overrride existing rules for this exceptional case. The SVG style should probably also be a class,...but in my situation I couldn't add that class to every SVG system-wide,..and again it's dealing with a fringe case, so I bit the bullet on that one.

Anyway, I lost alot of time on this problem, hope this helps, and any notes that improve this solution are very welcomed.

Upvotes: 0

Paul LeBeau
Paul LeBeau

Reputation: 101800

I believe there is a workaround for this issue with IE, but I can't recall what it was. Someone on here will know.

In the meantime, one thing you can do to mitigate the issue is set preserveAspectRatio="xMidYMin meet" on the <svg>. At least then it will be aligned to the top of the <div>.

Upvotes: 4

Related Questions