如何实现嵌套SVG居中？请求将子SVG置于父SVG中心的方法

我需要将第二个SVG（子SVG）置于第一个SVG（父SVG）的中心位置，预期效果与当前状态对比如下：

当前子SVG并未居中，我需要实现如第一张图所示的居中效果。以下是我的代码：

<svg
 xmlns='http://www.w3.org/2000/svg'
 width='109'
 height='109'
 viewBox='0 0 109 109'>
 <circle
  id='Ellipse_19'
  data-name='Ellipse 19'
  cx='54.5'
  cy='54.5'
  r='50.5'
  fill='#292929'
 />

 <svg
  xmlns='http://www.w3.org/2000/svg'
  xlink='http://www.w3.org/1999/xlink'
  width='37.769'
  height='51.313'
  viewBox='0 0 37.769 51.313'>
  <defs>
   <clipPath id='clip-path'>
    <rect
     id='Rectangle_139'
     data-name='Rectangle 139'
     width='37.769'
     height='51.313'
     fill='#fff'
    />
   </clipPath>
  </defs>
  <g
   id='Group_194'
   data-name='Group 194'
   clip-path='url(#clip-path)'>
   <path
    id='Path_87'
    data-name='Path 87'
    d='M37.769,18.92A18.884,18.884,0,1,0,4.2,30.756v19.56a.953.953,0,0,0,1.267.9L18.884,46.6,32.3,51.259h0a.953.953,0,0,0,1.267-.9V30.757a18.776,18.776,0,0,0,4.2-11.837ZM18.884,1.94A16.951,16.951,0,0,1,31.207,30.557c-.133.143-.257.286-.391.419s-.523.486-.79.714l-.514.438c-.257.209-.533.409-.81.6l-.619.419q-.391.257-.8.486l-.743.4c-.257.134-.514.257-.781.371s-.581.238-.885.352-.486.191-.724.266-.685.2-1.038.295l-.648.171c-.409.086-.819.143-1.228.2l-.533.086h0a16.458,16.458,0,0,1-3.609,0l-.533-.086c-.409-.057-.819-.114-1.228-.2l-.648-.171c-.352-.086-.7-.181-1.038-.295s-.486-.171-.733-.266-.591-.229-.885-.352-.524-.248-.781-.371l-.743-.4q-.41-.238-.8-.486l-.628-.428q-.415-.286-.8-.6l-.523-.448c-.266-.229-.533-.466-.781-.714s-.266-.286-.409-.428h0A16.951,16.951,0,0,1,18.884,1.94Zm12.78,47.035L19.2,44.7a.952.952,0,0,0-.628,0L6.1,48.975V32.786c.191.171.391.323.581.486l.362.3c.343.276.7.533,1.048.781l.419.286c.352.229.7.448,1.067.648l.5.286c.343.181.7.352,1.057.5l.6.266c.343.143.685.257,1.028.381l.685.238c.343.1.685.181,1.038.266s.486.123.733.171.762.124,1.143.171c.219,0,.438.076.667.1s.6,0,.9.048v3.172a.953.953,0,0,0,1.905,0V37.748a5.567,5.567,0,0,0,.9-.048c.3-.048.438-.066.667-.1.381-.048.771-.1,1.143-.171s.486-.114.733-.171s.7-.162,1.038-.266L25,36.767c.343-.114.7-.238,1.028-.381l.6-.266c.362-.162.714-.324,1.057-.514l.495-.276c.362-.209.724-.419,1.076-.648l.419-.286c.362-.248.714-.514,1.048-.79l.352-.3c.191-.162.391-.314.581-.486Z'
    transform='translate(0 0)'
    fill='#fff'
   />
   <path
    id='Path_88'
    data-name='Path 88'
    d='M52.878,74.536a.966.966,0,0,0,1.352,0L67.743,61.042a.953.953,0,0,0,0-1.352l-3.381-3.371a.952.952,0,0,0-1.343,0L53.6,65.746l-2.7-2.857a.945.945,0,0,0-1.39,0L46.125,66.45a.953.953,0,0,0,0,1.324ZM50.2,64.889l2.676,2.857h0a.951.951,0,0,0,1.371,0L63.686,58.3l2.029,2.029L53.553,72.517,48.144,67.1Z'
    transform='translate(-38.059 -46.511)'
    fill='#fff'
   />
  </g>
 </svg>
</svg>

解决方案 #

要让子SVG居中，核心是计算子SVG相对于父SVG的偏移量，以下两种方法均能实现需求：

方法1：设置子SVG的x和y属性

父SVG的 viewBox 范围是0 0 109 109，中心坐标为(54.5, 54.5)。子SVG的宽度是37.769，高度是51.313，因此子SVG左上角的坐标应为：

• x = 54.5 - 37.769/2 ≈ 35.6155
• y = 54.5 - 51.313/2 ≈ 28.8435

直接给子SVG添加这两个属性即可：

<svg
 xmlns='http://www.w3.org/2000/svg'
 xlink='http://www.w3.org/1999/xlink'
 width='37.769'
 height='51.313'
 viewBox='0 0 37.769 51.313'
 x='35.6155'
 y='28.8435'>
 <!-- 子SVG内容 -->
</svg>

方法2：使用transform属性平移

通过translate变换直接将子SVG偏移到中心位置，效果和方法1一致：

<svg
 xmlns='http://www.w3.org/2000/svg'
 xlink='http://www.w3.org/1999/xlink'
 width='37.769'
 height='51.313'
 viewBox='0 0 37.769 51.313'
 transform='translate(35.6155, 28.8435)'>
 <!-- 子SVG内容 -->
</svg>

两种方法都能实现子SVG在父SVG中的居中效果，选择任意一种即可。

内容的提问来源于stack exchange，提问作者Rishu Kumar Nayak