CODEWITHSUNDEEP
htmlcsssvgscalevector-graphics
Florian sp1rit
Florian sp1rit

Reputation: 585

SVG does not scale correctly in Chrome

I have a SVG (simplified for the Question) with the max-height: 100%;. I don't know the width of the element (calculated on runtime). I want it to have a aspect ration of 1:1, (In Illustrator it was a square) and in Firefox it works. But in Chrome it is about 4:3.

Images: (First is in Firefox, second Chrome) https://i.sstatic.net/2JFh3.jpg

JSFiddle: https://jsfiddle.net/rs1bp420/

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 45%;
  width: 80%;
}

svg {
  max-height: 100%;
  width: auto;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #13ee37;
}

.cls-1 {
  fill: #13ee37;
}
<div class="container">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 974">
  <title>Vector
  </title>
  <path
        class="cls-1"
        d="M853.92,142.13c-194.92-189.7-515.2-189.32-709,0-193.59,189.07-192.73,499.79,0,688.67,193.37,189.5,513.88,191.67,709.05,2.07C1048.62,643.73,1048.76,331.62,853.92,142.13Z"
        transform="translate(0)"
        >
  </path>
</svg>
</div>

I want the SVG to be a square in Chrome, because of the border (or the box-shadow in my case)

Upvotes: 0

Views: 3302

Answers (1)

Kaiido
Kaiido

Reputation: 137133

This is a quirk in how inline-replaced elements should get resized. You are in a very special and unclear case where the ratio is known and thus the rule should be

If 'height' and 'width' both have computed values of 'auto' and the element has an intrinsic ratio but no intrinsic height or width, then the used value of 'width' is undefined in CSS 2.2. However, it is suggested that, if the containing block's width does not itself depend on the replaced element's width, then the used value of 'width' is calculated from the constraint equation used for block-level, non-replaced elements in normal flow.

But then, here we are not in "normal flow" because your container element has its position set to absolute.

In your case, you can replicate FF behavior in Chrome by assigning the width and height attributes of you <svg> so that they are not unknown at parsing anymore and don't default to 300 x 150px in Chrome.

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 45%;
  width: 80%;
}

svg {
  max-height: 100%;
  width: auto;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #13ee37;
}

.cls-1 {
  fill: #13ee37;
}
<div class="container">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 974" width="100%" height="100%">
  <title>Vector
  </title>
  <path
    class="cls-1"
    d="M853.92,142.13c-194.92-189.7-515.2-189.32-709,0-193.59,189.07-192.73,499.79,0,688.67,193.37,189.5,513.88,191.67,709.05,2.07C1048.62,643.73,1048.76,331.62,853.92,142.13Z"
    transform="translate(0)"
    >
  </path>
</svg>
</div>

Upvotes: 3

Related Questions