html - 如何在 -Tag 中将多边形和路径居中？

Question

如何在 <svg> 中居中多边形和路径-标签？我尝试使用 x和 y属性，但这不起作用。我希望播放和暂停图标在灰色圆圈内居中。

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>

Answer 1

将翻译值添加到转换中以移动事物，直到您对位置满意为止。

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>