svg - 我如何将一个 SVG 置于另一个 SVG 中

Question

我试图将 play 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>

Answer 1

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

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>