0

ive been trying to search how to best change the svg node so that it's center when i start messing around it's size.

what i have is this, and with this size, the svg and the path is center on top of the circle.

.svg-icon {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: calc(50% - 14px);
  left: calc(50% - 14px);
}
.poll-icon-container {
  height: 50px;
  width: 50px;
  position: relative;
  border-radius: 50%;
}
.custom-color-primary {
  background-color: pink;
}
<div class="rounded-circle poll-icon-container text-success custom-color-primary">
                            <svg width="2em"
                            height="2em"
                            viewBox="0 0 18 18" class="bi bi-box-arrow-in-up-right svg-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                              <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
                            </svg>
                          </div>

but once i start messing around the size, it would start moving around. i understand the first 2 parts of the viewbox is the panning of the object. but if i rely on that, then the svg (or the viewbox itself) is still off the center. here's what i have with a different size.

.svg-icon {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: calc(50% - 14px);
  left: calc(50% - 14px);
}
.poll-icon-container {
  height: 50px;
  width: 50px;
  position: relative;
  border-radius: 50%;
}
.custom-color-primary {
  background-color: pink;
}
<div class="rounded-circle poll-icon-container text-success custom-color-primary">
                            <svg width="3em"
                            height="3em"
                            viewBox="0 0 18 18" class="bi bi-box-arrow-in-up-right svg-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                              <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
                            </svg>
                          </div>

Basically what i do is i inspect element and you'll see the viewbox bigger and the (upper left) tip is at the same location and it just got bigger. I guess one of the question I have is do i move the viewbox's location so it center? if so, how do i do that correctly?

gdubs
  • 2,724
  • 9
  • 55
  • 102
  • SVG or not, the trick is the same for all the element: https://stackoverflow.com/a/25776315/8620333 – Temani Afif Jul 13 '20 at 14:40
  • and here is to manipulate the inside of the SVG: https://stackoverflow.com/q/41562911/8620333 – Temani Afif Jul 13 '20 at 14:41
  • @MisterJojo I added a question detailing how to center the path inside the SVG – Temani Afif Jul 13 '20 at 15:01
  • @MisterJojo I am giving (1) a question detailing how to center absolute (2) a question detailing how to adjust viewbox based on the path ... what is missing to solve the issue here? – Temani Afif Jul 13 '20 at 15:22

0 Answers0