style SVG <g> element - HTML CSS SVG

HTML CSS examples for SVG:Group

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

Description

style SVG <g> element

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--from ww w .  j a v  a 2  s.c o m-->
 <body> 
  <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> 
   <foreignobject id="G" width="300" height="200"> 
    <svg> 
     <rect fill="blue" stroke-width="2" height="112" width="84" y="55" x="55" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke="#000000" /> 
     <ellipse fill="#FF0000" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="155" cy="65" id="svg_7" rx="64" ry="56" /> 
    </svg> 
    <style>

#G {
   background: #cff; border: 1px dashed black;
}
#G:hover {
   background: #acc; border: 1px solid black;
}


            </style> 
   </foreignobject> 
  </svg>  
 </body>
</html>

Related Tutorials