CODEWITHSUNDEEP
htmlcsssvgpositiondisplay
Qwertiy
Qwertiy

Reputation: 21400

Place svg-groups like inline-blocks

How can I make g elements from the first svg be automatically placed in a row like svgs in second example are placed. Space between elements is irrelevant.

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.

Upvotes: 2

Views: 957

Answers (3)

Alexandr_TT
Alexandr_TT

Reputation: 14545

#1 Variant using USE

For the solution it is not necessary to draw many svg shapes. Enough in the defs section set the circle once without reference to the coordinates. 

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

And in the future, reuse: 

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

Below is an example of three groups of circles: 

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 Variant using translate (x y)

The variant differs from the decision of Robert Longson "by applyingtranslate entirely to the group of svg elements. 

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>

Upvotes: 3

Michael Mullany
Michael Mullany

Reputation: 31715

Put every shape in its own SVG element.

Upvotes: 1

Robert Longson
Robert Longson

Reputation: 124016

translate them perhaps.

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

Upvotes: 1

Related Questions