SVG Testing

by Fiddel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
x="0px" y="0px" viewBox="0 0 550 200">

  <polyline id="test"
    points="48,16  16,96  96,48  0,48  80,96" />
  



 <polygon fill="white" stroke="black" points="279,5 294,35 328,40 303,62 309,94 
279,79 248,94 254,62 230,39 263,35 "/>

 <circle fill="white" stroke="black" cx="170" cy="50" r="75"/>
 



 <line fill="none" stroke="black" x1="360" y1="1" x2="360" y2="95"/>
 
 
  <line fill="none" stroke="black" x1="410" y1="95" x2="380" y2="1"/>
  
  
   <rect x="430" y="5" fill="white" stroke="black" width="90" height="90"/>
   
  <g transform="translate(21,21) rotate(45)">
    <rect x="70" y="60" width="120" height="10"/>
</g>
  
   <polyline stroke="black" fill="none" points="255,155 99,133 164,255 111,144 144,111"/>


  
  
</svg>

SCSS

svg {
  
  width:800px;
  overflow:visible;
  background-color:pink;
  
  
  
  *:not(circle):not(rect) { 

    fill:yellow;
    stroke:lime;
    stroke-width:2;

    }
    
    *:nth-child(3) { 
    fill:blue;
    stroke-width:3;
    }
    
    
  
    g:hover {
      transform:rotate(67deg);
    }
  
  polyline#test {
    fill:red;
    fill-rule:evenodd;
    fill-rule:nonzero;
    
  }
  
  
}

@media screen and (max-width: 480px)  {  
    svg {
     width:100px;


        * { fill :blue; }
    }
  
}

JavaScript

d3.selectAll("svg *")             // select all <p> elements
   .transition("trans_1")      // transition with name "trans_1"
     .delay(0)                 // transition starting 0ms after trigger
     .duration(500)            // transitioning during 500ms
     .ease("linear")           // transition easing progression is linear...
   .style("fill", "pink");    // ... to color:pink