CODEWITHSUNDEEP
htmlcsssvg
Alex
Alex

Reputation: 183

How can I center a polygon and a path inside <svg>-Tag?

How can I center a polygon and a path inside <svg>-Tag? I tried using x and y attributes but this doesn't work. I want the play and pause icon to be centered inside the gray circle.

svg#play {
  background-color: gray;
  border-radius: 50%;
  fill: white;
  height: calc(70px * 2 - 5px);
  width: calc(70px * 2 - 5px);
}

svg#pause {
  background-color: gray;
  border-radius: 50%;
  fill: white;
  height: calc(70px * 2 - 5px);
  width: calc(70px * 2 - 5px);
}
<svg id="play" class="icon">
<polygon points="9.33 6.69 9.33 19.39 19.3 13.04 9.33 6.69" transform="scale(4.0)"></polygon>
</svg>
<svg id="pause" class="icon">
<path id="ytp-12" d="M 11 10 L 17 10 L 17 26 L 11 26 M 20 10 L 26 10 L 26 26 L 20 26" transform="scale(4.0)"></path>
</svg>

Upvotes: 1

Views: 1201

Answers (1)

Robert Longson
Robert Longson

Reputation: 124299

Add translate values to the transform to move things around till you're happy with the position.

svg#play {
  background-color: gray;
  border-radius: 50%;
  fill: white;
  height: calc(70px * 2 - 5px);
  width: calc(70px * 2 - 5px);
}

svg#pause {
  background-color: gray;
  border-radius: 50%;
  fill: white;
  height: calc(70px * 2 - 5px);
  width: calc(70px * 2 - 5px);
}
<svg id="play" class="icon">
<polygon points="9.33 6.69 9.33 19.39 19.3 13.04 9.33 6.69" transform="scale(4.0) translate(4, 4)"></polygon>
</svg>
<svg id="pause" class="icon">
<path id="ytp-12" d="M 11 10 L 17 10 L 17 26 L 11 26 M 20 10 L 26 10 L 26 26 L 20 26" transform="scale(4.0) translate(-1.5, -1)"></path>
</svg>

Upvotes: 1

Related Questions