如何在一个SVG内部居中另一个SVG？

Question

如何在一个SVG内部居中另一个SVG？

3

我试图将播放SVG居中放置在SVG圆形的中心，但似乎无法弄清如何实现。需要水平和垂直居中。 https://jsfiddle.net/c0qshm0t/17/

<svg width="64" height="64" style="background-color:black;" viewBox="25 9 50 82">
  <circle cx="50" cy="50" r="40" stroke="red" stroke-width="3" fill="gray" />


  <svg viewBox="0 0 1229 1481" width="24" height="29" style="background-color:green;">
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red" />
  </svg>

</svg>

- user8769005

将内部<svg>的x和y属性设置为适当的值。 - Robert Longson

那是一个不同的问题。您可以像居中任何需要居中的HTML对象一样将其居中。 - Robert Longson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul LeBeau · Accepted Answer

您可以通过设置x和y属性来定位内部的<svg>。位置应该是：

x = outer_svg_viewBox_centre_X - (inner_svg_width / 2)
y = outer_svg_viewBox_centre_Y - (inner_svg_height / 2)

因此，在这个SVG的情况下，这些计算是：

x = (25 + 50/2) - 24/2
  = 50 - 12
  = 38
y = (9 + 82/2) - 29/2
  = 50 - 14.5
  = 35.5

<svg width="64" height="64" style="background-color:black;" viewBox="25 9 50 82">
  <circle cx="50" cy="50" r="40" stroke="red" stroke-width="3" fill="gray" />


  <svg x="38" y="35.5"
       viewBox="0 0 1229 1481" width="24" height="29" style="background-color:green;">
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red" />
  </svg>

</svg>