html - 像内联 block 一样放置 svg-groups

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>

PS:Same question in Russian.

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 使用平移 (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>