HTML CSS examples for SVG:Transform
CSS in a SVG file transform scale to move right and down
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .facebook {<!--from w ww . jav a2 s. c o m--> fill:black; stroke:#3b5998; pointer-events:all; opacity: 0.8; transition: all .3s ease-in-out; transition: transform 0.3s ease; transform-origin: center center; } .facebook:hover { fill:#3b5998; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } </style> </head> <body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="731.802px" viewbox="0 0 800 731.802" style="enable-background:new 0 0 800 731.802;" xml:space="preserve"> <g id="Background"> <g> <rect style="fill:#8CDDEA;" width="800" height="731.802" /> </g> </g> <g id="Objects"> <g id="OBJECTS"> <path id="facebook" class="facebook" style="red" d="M334.979,143.357c0,1.308,0,7.15,0,7.15h-5.322v8.744h5.322v25.983h10.9 v-25.9h7.336c0,0,0.6-4.1,1.02-8.777c-0.9,0-8.314,0-8.314,0s0-5.087,0-5.979c0-0.893,1.191-2.095,2.37-2.095 c1.176,0,3.6,0,5.9,0c0-1.1,0-5.3,0-9.103c-3.068,0-6.559,0-8.099,0C334.709,133.298,334.979,142.05,334.979,143.357z" /> </g> </g> </svg> </body> </html>