Using Dynamic CSS selection within a group SVG Path - HTML CSS SVG

HTML CSS examples for SVG:Path

  1. HOME
  2. HTML CSS
  3. SVG
  4. Path

Description

Using Dynamic CSS selection within a group SVG Path

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>SVG Dynamic Path Color update</title> 
  <style>

.path_group {<!--from  ww  w. ja  v a 2s  .c om-->
   stroke="black";
   fill="none";
   stroke-width="2";
}
.myPath{ stroke-width:1.3; }
.path_group .myPath:nth-child(4n+1)
{ stroke:red; }
.path_group .myPath:nth-child(4n+2)
{ stroke:blue; }
.path_group .myPath:nth-child(4n+3)
{ stroke:green; }
.path_group .myPath:nth-child(4n+4)
{ stroke:deepPink; }

      </style> 
 </head> 
 <body translate="no"> 
  <svg width="100%" height="100%" viewbox="0 0 260 200" xmlns="http://www.w3.org/2000/svg"> 
   <g class="path_group"> 
    <path class="myPath" d="M10,25 L110,10" /> 
    <path class="myPath" d="M10,35 L110,20" /> 
    <path class="myPath" d="M10,45 L110,30" /> 
    <path class="myPath" d="M10,55 L110,40" /> 
    <path class="myPath" d="M10,65 L110,50" /> 
   </g> 
  </svg>  
 </body>
</html>

Related Tutorials