svg path matrix and hover

by zerrax

HTML

<script src="http://cdn.jsdelivr.net/snap.svg/0.3.0/snap.svg.js"></script>
<svg width="65" height="65">
    <path stroke-width="5" stroke='#d9d3d2' fill="none" d="m 10 15 q 0 -5 5 -5 l 41 0 q 5 0 5 5 l 0 41 q 0 5 -5 5 l -41 0 q -5 0 -5 -5 l 0 -41" />
</svg>
<svg width="65" height="65">
    <path stroke-width="5" stroke='#d9d3d2' fill="none" d="m 10 15 q 0 -5 5 -5 l 41 0 q 5 0 5 5 l 0 41 q 0 5 -5 5 l -41 0 q -5 0 -5 -5 l 0 -41 m 25 -5 l 0 51" />
</svg>
<svg width="65" height="65">
    <path stroke-width="5" stroke='#d9d3d2' fill="none" d="m 10 15 q 0 -5 5 -5 l 41 0 q 5 0 5 5 l 0 41 q 0 5 -5 5 l -41 0 q -5 0 -5 -5 l 0 -41 m 25 -5 l 0 51 m -25 -25 l 51 0" />
</svg>

CSS

svg{
  transform:matrix(0.50,0.00,0.00,0.50,-20,-20);
-ms-transform:matrix(0.50,0.00,0.00,0.50,-20,-20);
-webkit-transform:matrix(0.50,0.00,0.00,0.50,-20,-20);

}
svg path:hover {
    stroke:#8db9c9;
    pointer-events:all;
    cursor:pointer;

}