我想在第一个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-.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>
1条答案
按热度按时间dffbzjpn1#
你可以这样做一些。如果你真的想那样。这是第一种方法，你可以做这些事情。
使用
<g>元素<g>元素并使用第二个SVG Package ，则使用了翻译。translate(34 27)将第二个SVG34水平和27垂直移动，以将其对齐到第一个SVG的中心。