SVG hook

by jeum

HTML

<div id="container">
    <svg version="1.1" id="svghook" xmlns="http://www.w3.org/2000/svg" viewBox="-1 0 2 10">
        <polyline id="svghookbutton" points="0,1 -0.5,10 0.4,10.4 "></polyline>
    </svg>
</div>

CSS

#container {
    width: 40px;
    height: 400px;
}
#svghook {
    fill: black;                /* SVG: couleur de remplissage */
    stroke: black;
    stroke-width: 0.3px;      /* SVG: Ă©paisseur de ligne (avant scale) */
    stroke-linejoin: round;    /* SVG: type de jointure */
}
#svghookbutton {
    stroke: white;
    stroke-width: 0.2px;
    /* animation rotate */
    -webkit-transition: all 0.75s ease-out;
    -moz-transition: all 0.75s ease-out;
    -o-transition: all 0.75s ease-out;
    transition: all 0.75s ease-out;
}
#svghookbutton:hover {
	/* Firefox */
	-moz-transform: rotate(180deg);
    -moz-transform-origin: 0px 10px;
	/* Chrome, Safari, Opera (WebKit) */
	-webkit-transform: rotate(180deg);
    -webkit-transform-origin: 0px 10px;
	/* Opera */
	-o-transform: rotate(180deg);
    -o-transform-origin: 0px 10px;
	/* Standard */
	transform: rotate(180deg);
    transform-origin: 0px 10px;
}