像内联块一样放置svg组

Question

如何使第一个svg中的g元素自动放置在一行中，就像第二个示例中放置的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>

附言：同样的俄语问题。

Answer 1

#1使用USE的变体

对于解决方案，不需要绘制许多svg形状。defs部分已足够在不参考坐标的情况下设置一次圆。

<defs> 
<circle id="crc1" r="12px"   /> 
</defs>

在未来，重用：

<use xlink:href="#crc1" x="20px" y="20px"  /> 
<use xlink:href="#crc1" x="55px" y="20px"  /> 
<use xlink:href="#crc1" x="90px" y="20px"  /> `   

下面是三组圆圈的示例：

svg circle{
fill:inherit;
}
#crc1 {
fill:yellowgreen;
}

#crc2 {
fill:mediumseagreen;
}
#crc3 {
fill:teal;
}
#crc1:hover, #crc2:hover , #crc3:hover
{
fill:red;
transition: 0.4s ;
}

<svg  viewBox="0 0 200 200" >
<defs> 
<circle id="crc1" r="12px"   />
<circle id="crc2" r="12px"   />
<circle id="crc3" r="12px"   />
</defs>

<use xlink:href="#crc1" x="20px" y="20px"  /> 
<use xlink:href="#crc1" x="55px" y="20px"  /> 
<use xlink:href="#crc1" x="90px" y="20px"  /> 

<use xlink:href="#crc2" x="20px" y="55px"  /> 
<use xlink:href="#crc2" x="55px" y="55px"  /> 
<use xlink:href="#crc2" x="90px" y="55px"  /> 
<use xlink:href="#crc2" x="125px" y="55px"  /> 

<use xlink:href="#crc3" x="20px" y="90px"  /> 
<use xlink:href="#crc3" x="55px" y="90px"  /> 
<use xlink:href="#crc3" x="90px" y="90px"  /> 
<use xlink:href="#crc3" x="125px" y="90px"  /> 
<use xlink:href="#crc3" x="160px" y="90px"  />

</svg>

#2使用translate(x y)的变量

该变体与Robert Longson的决定不同，"将translate完全应用于svg元素组。

svg path{
fill:inherit;
stroke:inherit;
}
#crc1 {
fill:dodgerblue;
}
#crc2 {
fill:  royalblue;
}
#crc3 {
fill:  blueviolet;
}
#crc1:hover, #crc2:hover , #crc3:hover
{
fill:  limegreen; 
transition: 0.4s;
}

<svg   viewBox="0 0 420 420" style="border:1px solid red;"> 
<defs> 
<g id="crc1" >
<set attributeName='stroke'  to='limegreen' begin='mouseover' end='mouseout'/>
<set attributeName='fill'  to='lime' begin='mouseover' end='mouseout'/>
<circle cx="38.63" cy="64" r="35" fill="none" stroke-width="3.5" /> 
<path  d="M38.8 31.3 69.4 53.6 57.6 89.6 19.7 89.5 8.1 53.4z" stroke-width="4" />
</g> 
<g id="crc2">
<set attributeName='stroke'  to='limegreen' begin='mouseover' end='mouseout'/>
<set attributeName='fill'  to='lime' begin='mouseover' end='mouseout'/>
<circle cx="38.63" cy="64" r="35" fill="none" stroke-width="9.5" /> 
<path  d="M38.8 31.3 69.4 53.6 57.6 89.6 19.7 89.5 8.1 53.4z" stroke-width="4" />
</g> 
<g id="crc3">
<set attributeName='stroke'  to='limegreen' begin='mouseover' end='mouseout'/>
<set attributeName='fill'  to='lime' begin='mouseover' end='mouseout'/>
<circle cx="38.63" cy="64" r="35" fill="none" stroke-width="14.5" /> 
<path  d="M38.8 31.3 69.4 53.6 57.6 89.6 19.7 89.5 8.1 53.4z" stroke-width="4" />
</g> 
</defs>
<use xlink:href="#crc1" x="20px"  /> 
<use xlink:href="#crc1" x="100px"   /> 
<use xlink:href="#crc1" x="180px"   /> 
<g transform="translate(0 100)">
<use xlink:href="#crc2" x="20px"   /> 
<use xlink:href="#crc2" x="100px"   /> 
<use xlink:href="#crc2" x="180px"   /> 
<use xlink:href="#crc2" x="260px"  /> 
</g> 
<g transform="translate(0 200)">
<use xlink:href="#crc3" x="20px"   /> 
<use xlink:href="#crc3" x="100px"   /> 
<use xlink:href="#crc3" x="180px"   /> 
<use xlink:href="#crc3" x="260px"   /> 
<use xlink:href="#crc3" x="340px"   /> 
</g>
</svg>

Answer 2

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

Answer 3

也许可以翻译它们。

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