欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何使嵌套的SVG居中？

CSS
夏志豪1年前8瀏覽0評論

我想在第一個SVG的中心制作第二個SVG。

下面是它的外觀和當前狀態:

enter image description here

Enter image description here。

正如你在上面第二張圖片中看到的，它不在中心。我希望那個圖像像第一個圖像一樣。

以下是我的代碼:

<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-.171.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>

可以這樣做一些。如果你真的想那樣。這是你做這些事情的第一種方法。

通過使用& ltg & gt元素 & ltg & gt元素并用第二個SVG包裝，則使用翻譯。translate(34 27)水平移動第二SVG 34，垂直移動第二SVG 27，使其與第一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' />
  
  <g transform='translate(34 27)'>
    <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-.171.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>
  </g>
</svg>