I need a way (with CSS3 or jQuery) to change this SVG shape from X to ↓ (Down arrow). I tried more ways but i still have problems.
My basic idea is to get lines with id (svg_5, svg_6) and make these the head of my arrow.
$('a').click(function (e) {
if ($('.formJ').css('visibility') == 'hidden')
$('.formJ').css('visibility', 'visible');
else
$('.formJ').css('visibility', 'hidden');
e.preventDefault();
});
$("a").bind({
mouseover: function () {
$("circle").css({ "stroke": "#80C6E7", "fill": "white" })
$("line").css({ "stroke": "#80C6E7" })
},
mouseout: function () {
$("circle").css({ "stroke": "white", "fill": "#80C6E7" })
$("line").css({ "stroke": "white" })
}
});
$("element").unbind('mouseover mouseout');body {
background: #80C6E7;
}
a, a:active, a:hover {
text-decoration: none;
outline: 0;
}
.wrap {
width: 260px;
margin: auto;
}
.formindex {
display: none;
}
.formJ {
visibility: hidden;
}
.hex-icon-plus line {
transform-origin: 100px 100px;
-webkit-transform-origin: 100px 100px;
animation: hex-icon-heart-beat 2s linear infinite;
-webkit-animation: hex-icon-heart-beat 2s linear infinite;
-webkit-animation-delay: 0s; /* Chrome, Safari, Opera */
}
@keyframes hex-icon-heart-beat {
0% {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(0.90, 0.90, 1);
}
60% {
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes hex-icon-heart-beat {
0% {
-webkit-transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(0.90, 0.90, 1);
}
60% {
-webkit-transform: scale3d(1, 1, 1);
}
}
svg {
padding-top: 20%;
margin: 12%;
}
h1 {
color: white;
text-align: center;
margin-bottom: 12px;
}
.loginform-in {
width: 200px;
margin: 25px;
margin-top: 60px;
}
input {
margin-bottom: 12px;
}
.loginbutton {
background: #2C3E50;
border: 1px solid #2C3E50;
color: #80C6E7;
cursor: pointer;
font-size: 13px;
font-weight: normal;
height: 29px;
letter-spacing: 1px;
width: 100%;
}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="../CSS/reset.css" />
<link rel="stylesheet" type="text/css" href="../CSS/style.css" />
<link rel="stylesheet" type="text/css" href="../CSS/formStyle.css" />
<title></title>
</head>
<body>
<div class="wrap">
<span class="hex-icon-plus">
<a href="Form.html">
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g>
<circle fill="none" stroke="#ffffff" stroke-width="2" cx="101.874999" cy="101.000003" r="97.070312" id="svg_2" />
<line fill="none" stroke="#ffffff" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x1="100.1875" y1="40.375009" x2="100.1875" y2="160.437515" id="svg_4" />
<line fill="none" stroke="#ffffff" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x1="41.14063" y1="100" x2="161.078126" y2="101" id="svg_5" />
<line fill="none" stroke="#ffffff" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x1="41.14063" y1="100" x2="161.078126" y2="101" id="svg_6" />
</g>
</svg>
</a>
</span>
<div class="loginform-in formJ">
<fieldset>
<form action="Users.html" method="get">
<h1>User</h1>
<ul>
<li>
<label for="name"></label>
<input type="text" size="30" name="name" placeholder="Name" id="name" />
</li>
<li>
<label for="name"></label>
<input type="password" size="30" name="word" placeholder="Password" id="word" />
</li>
<li>
<label></label>
<input type="submit" id="login" name="login" value="Login" class="loginbutton" />
</li>
</ul>
</form>
</fieldset>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../Scripts/form.js"></script>
</body>
</html>My desired outcome is this shape
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g>
<circle id="svg_2" r="97.07031" cy="101" cx="101.875" stroke-width="2" stroke="#000000" fill="none"/>
<line id="svg_4" y2="160.43751" x2="100.1875" y1="40.37501" x1="100.1875" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_5" y2="101.0001" x2="161.07813" y1="158.55503" x1="101.11938" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_6" y2="158.48696" x2="99.49754" y1="99.99989" x1="41.14063" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
</g>
</svg>
