Question

我试图将游戏svg集中在SVG圈子的中间，似乎无法弄清楚如何做到这一点。

垂直和水平。

＆＃13;

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

＆＃13;

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>

我如何将SVG集中在另一个SVG中

1 个答案: