将 svg-groups 放置为内联块

Question

如何使第一个 svg 中的 g 元素自动排成一行，就像第二个示例中的 svg 一样。 Space 元素之间无关紧要。

<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 元素中。

Answer 3

#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 使用平移的变体 (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>

将 svg-groups 放置为内联块

Place svg-groups like inline-blocks

html

css

svg

position

display

#1 变体使用 USE

#2 使用平移的变体 (x y)