CODEWITHSUNDEEP
htmlcsssvg
samana ghimire
samana ghimire

Reputation: 124

SVG works fine on firefox but the its positioning changes on other browsers

I have included a SVG for polygon and made necessary positioning.It works fine on firefox but the positioning changes on other browsers.I have attached the screenshots in both firefox and Chrome respectively.Why is this happening?thisisthe one in firefoxenter image description here

  svg{
      position: absolute;
      z-index: 1;
      left: 17%;
      top: -23%;
    }
  .circle {
      background: #b7a3a3;
      height: 600px;
      width: 600px;
      border-radius: 50%;
      margin: 0 auto;
      position: relative;
   }
  <div class="flex-auto flex items-center justify-center w-100">
            <div class="w-100">
              <svg class="w-100 white debug-grid mb4 db"viewBox="0 0 1000 1000" stroke="#fff" fill="none" stroke-width="50"
                   id="js-svg">
                <polygon id="js-polygon" points="601.4282075197532,484.74767078498866 522.9616144951742,592.7476707849887 396,634 269.03838550482584,592.7476707849887 190.57179248024684,484.74767078498866 190.5717924802468,351.2523292150114 269.0383855048258,243.25232921501137 395.99999999999994,202 522.9616144951741,243.25232921501132 601.4282075197532,351.2523292150113" />
              </svg>
            </div>
  </div>
  <div class="circle">
  </div>

Upvotes: 0

Views: 396

Answers (1)

JasonB
JasonB

Reputation: 6368

You've got some issues stemming from the makeup of that svg. Your svg has a 461x468 unit polygon inside of a 1000x1000 unit viewbox and it isn't even centered.

It looks like what you want is a decagon centered inside of a circle. After normalizing your svg polygon the css gets a lot easier to deal with because you can just center it without using magic numbers.

To normalize the polygon, I took the points and subtracted the smallest x coordinate from all x coordinates, did the same for the y coordinates. Then add half of the stroke width to all coordinates. The viewbox then needs to fit the largest coordinates plus half of the stroke width.

I've absolutely positioned the svg inside of the circle to center it. The circle is set to height:0 and padding-top:100% to maintain a 1:1 aspect ratio.

If you want to use the bootstrap positioning and establish a 600px width, apply those styles to a parent element.

svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}

.circle {
  background: #b7a3a3;
  height: 0px;
  padding-top: 100%;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
}
<div class="circle">
  <svg viewBox="0 0 461 486" stroke="#fff" fill="none" stroke-width="50" id="js-svg">
                <polygon id="js-polygon" points="435.856415039507,309.747670784988	
357.389822014928,417.747670784988	
230.428207519754,459	
103.466593024579,417.747670784988	
25,309.747670784988	
25,176.252329215011	
103.466593024579,68.252329215011	
230.428207519753,27	
357.389822014928,68.252329215011	
435.856415039507,176.252329215011" />
              </svg>
</div>

Upvotes: 4

Related Questions