html – Arrange elements within svg sequentially

Question:

How to sequentially build groups inside one svg element? It is necessary that the g elements of the first svg themselves rise approximately like svg tags in the second div e.

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: This question is in English.

Answer:

#1 Variant using USE

It is not necessary to draw a lot of svg shapes for the solution. Enough in the defs section
set a circle once without reference to coordinates.

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

And then 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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  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>

css transition animation on hover only works in Firefox

Apparently, Chrome and Opera browsers do not reproduce the combination of svg of the use command and css transition .

Below example with SVG animation works in all browsers except IE, Edge

Animation when hovering the cursor is performed by the command:

<set attributeName='fill'   to='red' begin='mouseover' end='mouseout' />

circle{
 fill:inherit;
 }
 
 #crc1 {
 fill:yellowgreen;
 
   }
 
 
  #crc2 {
 fill:mediumseagreen;
 }
  #crc3 {
 fill:teal;
 }  
 #crc1:hover, #crc2:hover , #crc3:hover
 {
 fill:red;
 transition: 0.5s;
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 200 200" >
<defs> 

 <circle id="crc1" r="12px" >
 <set attributeName='fill'   to='red' begin='mouseover' end='mouseout' />
 </circle>
 
 <circle id="crc2" r="12px"   >
 <set attributeName='fill'  to='red' begin='mouseover' end='mouseout' />
 </circle>
 
 <circle id="crc3" r="12px">
<set attributeName='fill'  to='red' begin='mouseover' end='mouseout' />
 </circle> 
 
 </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 Option using translate(xy)

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" > 
<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>
Post Views: 5
Scroll to Top