放置svg-groups，如内联块

Question

如何将第一个g中的svg元素自动放置在第二个示例中的svg行中。元素之间的空间无关紧要。

https://jsfiddle.net/kj1tmre3/1/

<div>
  <svg width=100 height=20>
    <g><circle cx=10 cy=10 r=10 /></g>
    <g><circle cx=10 cy=10 r=10 /></g>
    <g><circle cx=10 cy=10 r=10 /></g>
    <g><circle cx=10 cy=10 r=10 /></g>
  </svg>
</div>

<div>
  <svg width=20 height=20><g><circle cx=10 cy=10 r=10 /></g></svg>
  <svg width=20 height=20><g><circle cx=10 cy=10 r=10 /></g></svg>
  <svg width=20 height=20><g><circle cx=10 cy=10 r=10 /></g></svg>
  <svg width=20 height=20><g><circle cx=10 cy=10 r=10 /></g></svg>
</div>

PS：Same question in Russian.

Answer 1

或许翻译它们。

<div>
  <svg width=100 height=20>
    <g><circle cx=10 cy=10 r=10 /></g>
    <g transform="translate(24,0)"><circle cx=10 cy=10 r=10 /></g>
    <g transform="translate(48,0)"><circle cx=10 cy=10 r=10 /></g>
    <g transform="translate(72,0)"><circle cx=10 cy=10 r=10 /></g>
  </svg>
</div>

<div>
  <svg width=20 height=20><g><circle cx=10 cy=10 r=10 /></g></svg>
  <svg width=20 height=20><g><circle cx=10 cy=10 r=10 /></g></svg>
  <svg width=20 height=20><g><circle cx=10 cy=10 r=10 /></g></svg>
  <svg width=20 height=20><g><circle cx=10 cy=10 r=10 /></g></svg>
</div>

Answer 2

将每个形状放在自己的SVG元素中。