Etikett: height

IE11 är en av flera browsers som inte fixar att kirra höjd på ett svg-objekt ordentligt. Följande metod kan funka som ett fulhack för att få det att fungera. Se till att ha med viewBox i din svg.

• Räkna ratio på viewboxen (höjd/bredd) – exempelvis blir ett värde på 0,1234 = 12,34%
• Omslut med en div (ex. class=”svg-wrapper”)

I CSSen sätter du:

.svg-wrapper {
   padding-bottom: [din ratio]% //(se procentvärdet ovan)
   position: relative;
}

.svg-wrapper svg {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: auto; //(alltså 100%)
}