Mansi Shukla
Reputation: 387
How to change stroke color of SVG on hover?
I have a web page with svg logo with drawing animation .
I want to change color of stroke from green to white on hover any way to achieve that ?
My logo is "V" shaped SVG
I want to change that stroke dash color from green to white on hovering mouse using CSS
I tried adding div element and adding hover to it but it' didn't worked at all any help would be great.
P.S It would be better if you view in full screen
var words = document.getElementsByClassName('word');
var wordArray = [];
var currentWord = 0;
for (var i = 0; i < words.length; i++) {
splitLetters(words[i]);
}
function changeWord() {
var cw = wordArray[currentWord];
var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1];
for (var i = 0; i < cw.length; i++) {
animateLetterOut(cw, i);
}
for (var i = 0; i < nw.length; i++) {
nw[i].className = 'letter behind';
nw[0].parentElement.style.opacity = 1;
animateLetterIn(nw, i);
}
currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1;
}
function animateLetterOut(cw, i) {
setTimeout(function() {
cw[i].className = 'letter out';
}, i*80);
}
function animateLetterIn(nw, i) {
setTimeout(function() {
nw[i].className = 'letter in';
}, 340+(i*80));
}
function splitLetters(word) {
var content = word.innerHTML;
word.innerHTML ='';
var letters = [];
for (var i = 0; i < content.length; i++) {
var letter = document.createElement('span');
letter.className = 'letter';
var char = content.charAt(i);
if(char === " ")
letter = document.createElement('br');
else
letter.innerHTML = char;
word.appendChild(letter);
letters.push(letter);
}
wordArray.push(letters);
}
changeWord();
setInterval(changeWord, 4000);
var i = 0;
var txt = 'Hi , ';
var speed = 100;
function typeWriter() {
if (i < txt.length) {
document.getElementById("demo").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
typeWriter()
var j = 0;
var txt1 = 'I\'m Vivank a ,';
var speed = 100;
function typeWriter1() {
if (j < txt1.length) {
document.getElementById("demo1").innerHTML += txt1.charAt(j);
j++;
setTimeout(typeWriter1, speed);
}
}
typeWriter1():root {
--mainColor: #fff;
}
body{
background-color: #252627;
margin: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.page{
width: 100%;
height: 100%;
position: absolute;
}
.bglogo{
position: absolute;
top:20%;
right: 15vh;
height: 65vh;
width: 65vh;
z-index: 0;
}
.home-page{
width: 100%;
will-change: contents;
height: 90%;
min-height: 566px;
position: absolute;
opacity: 1;
top: 5%;
margin: 0 auto;
z-index: 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
path {
fill: #252627;
stroke: #00ffdc;
animation: my_animation 2s linear forwards, filling .2s linear 2s forwards;
stroke-dasharray: 400; /* need to ... */
stroke-dashoffset: 400; /* ... match */
}
@keyframes my_animation {
to {stroke-dashoffset: 0}
}
@keyframes filling {
to {fill: #ff0046}
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
body {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 40px;
}
.text {
position: absolute;
left: 10%;
top: 40%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 40%;
max-height: 90%;
}
p {
display: inline-block;
vertical-align: top;
margin: 0;
color: white;
font-size: 64px;
}
.word {
position: absolute;
width: 100%;
opacity: 0;
white-space: nowrap;
}
.letter {
display: inline-block;
position: relative;
float: left;
transform: translateZ(25px);
transform-origin: 50% 50% 25px;
}
.letter.out {
transform: rotateX(90deg);
transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.letter.behind {
transform: rotateX(-90deg);
}
.letter.in {
transform: rotateX(0deg);
transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wisteria {
color: #8e44ad;
}
.belize {
color: #2980b9;
}
.pomegranate {
color: #c0392b;
}
.green {
color: #16a085;
}
.midnight {
color: #003366;
}
p {
color: var(--mainColor);
text-decoration: none;
}
p:hover {
color: transparent;
-webkit-text-stroke: 2px var(--mainColor);
}
@supports not(-webkit-text-stroke: 2px red) {
p:hover {
text-shadow:
3px 3px 0 var(--mainColor),
-1px -1px 0 var(--mainColor),
1px -1px 0 var(--mainColor),
-1px 1px 0 var(--mainColor),
1px 1px 0 var(--mainColor);
}
}
.top-tags{
bottom: auto;
top: 0px;
}
.tags{
color: #515152;
position: absolute;
bottom: 0px;
left: 80px;
font-size: 18px;
font-family: 'La Belle Aurore', cursive;
}
.home-page #demo::before{
content: '<h1>';
font-family: 'La Belle Aurore', cursive;
color: #515152;
font-size: 18px;
position: absolute;
margin-top: -35px;
}
.home-page .word::after{
content: '</h1>';
font-family: 'La Belle Aurore', cursive;
color: #515152;
font-size: 18px;
position: absolute;
margin-top: 18px;
margin-left: 20px;
-webkit-animation: myanim2 1s 1.7s backwards;
animation: myanim2 1s 1.7s backwards;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
@keyframes myanim2 {
0% { opacity: 0;}
100% {opacity: 1;}
}
@-webkit-keyframes myanim2 {
0% { opacity: 0; }
100% {opacity: 1;}
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vivank Sharma</title>
<link rel="stylesheet" href="css/master.css">
<link rel="stylesheet" href="css/master_responsive.css">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=La+Belle+Aurore" rel="stylesheet">
</head>
<body class="noselect">
<div class="page">
<div class="bglogo">
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 89.999 89.999" style="enable-background:new 0 0 89.999 89.999;" xml:space="preserve">
<g>
<path d="M89.551,24.201c-5.029,28.863-33.127,53.301-41.577,58.883c-8.454,5.582-16.163-2.236-18.96-8.148 c-3.201-6.738-12.793-43.285-15.307-46.311C11.195,25.596,3.656,31.65,3.656,31.65L0,26.768c0,0,15.307-18.623,26.957-20.951 c12.35-2.469,12.332,19.318,15.301,31.416c2.873,11.701,4.807,18.398,7.312,18.398c2.514,0,7.311-6.525,12.562-16.531 c5.264-10.016-0.225-18.857-10.505-12.568C55.738,1.395,94.578-4.65,89.551,24.201z" fill="#ff0043"/>
</g>
</svg>
</div>
<div class="home-page" style="opacity=1;">
<span class="tags top-tags"> <html><br> <body> </span>
<div class="text">
<p id="demo"></p><br>
<p id="demo1"></p>
<br>
<p>
<span class="word wisteria">wonderful developer</span>
<span class="word belize">geek developer</span>
<span class="word pomegranate">web developer</span>
<span class="word green">android developer</span>
<span class="word midnight">ML-AI developer</span>
</p>
</div>
<span class="tags bottom-tags"> </body><br> </html> </span>
</div>
</body>
<script type="text/javascript" src="JS/typewriter.js"></script>
</html>Upvotes: 1
Views: 3949
Answers (1)
Lalji Tadhani
Reputation: 14159
Add This CSS
.bglogo path:hover{
stroke: #00f;
}
.bglogo{
z-index: 99;
}
var words = document.getElementsByClassName('word');
var wordArray = [];
var currentWord = 0;
for (var i = 0; i < words.length; i++) {
splitLetters(words[i]);
}
function changeWord() {
var cw = wordArray[currentWord];
var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1];
for (var i = 0; i < cw.length; i++) {
animateLetterOut(cw, i);
}
for (var i = 0; i < nw.length; i++) {
nw[i].className = 'letter behind';
nw[0].parentElement.style.opacity = 1;
animateLetterIn(nw, i);
}
currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1;
}
function animateLetterOut(cw, i) {
setTimeout(function() {
cw[i].className = 'letter out';
}, i*80);
}
function animateLetterIn(nw, i) {
setTimeout(function() {
nw[i].className = 'letter in';
}, 340+(i*80));
}
function splitLetters(word) {
var content = word.innerHTML;
word.innerHTML ='';
var letters = [];
for (var i = 0; i < content.length; i++) {
var letter = document.createElement('span');
letter.className = 'letter';
var char = content.charAt(i);
if(char === " ")
letter = document.createElement('br');
else
letter.innerHTML = char;
word.appendChild(letter);
letters.push(letter);
}
wordArray.push(letters);
}
changeWord();
setInterval(changeWord, 4000);
var i = 0;
var txt = 'Hi , ';
var speed = 100;
function typeWriter() {
if (i < txt.length) {
document.getElementById("demo").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
typeWriter()
var j = 0;
var txt1 = 'I\'m Vivank a ,';
var speed = 100;
function typeWriter1() {
if (j < txt1.length) {
document.getElementById("demo1").innerHTML += txt1.charAt(j);
j++;
setTimeout(typeWriter1, speed);
}
}
typeWriter1():root {
--mainColor: #fff;
}
body{
background-color: #252627;
margin: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.page{
width: 100%;
height: 100%;
position: absolute;
}
.bglogo{
position: absolute;
top:20%;
right: 15vh;
height: 65vh;
width: 65vh;
z-index: 99;
}
.home-page{
width: 100%;
will-change: contents;
height: 90%;
min-height: 566px;
position: absolute;
opacity: 1;
top: 5%;
margin: 0 auto;
z-index: 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
path {
fill: #252627;
stroke: #00ffdc;
animation: my_animation 2s linear forwards, filling .2s linear 2s forwards;
stroke-dasharray: 400; /* need to ... */
stroke-dashoffset: 400; /* ... match */
}
.bglogo path:hover{
stroke: #fff;
}
@keyframes my_animation {
to {stroke-dashoffset: 0}
}
@keyframes filling {
to {fill: #ff0046}
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
body {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 40px;
}
.text {
position: absolute;
left: 10%;
top: 40%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 40%;
max-height: 90%;
}
p {
display: inline-block;
vertical-align: top;
margin: 0;
color: white;
font-size: 64px;
}
.word {
position: absolute;
width: 100%;
opacity: 0;
white-space: nowrap;
}
.letter {
display: inline-block;
position: relative;
float: left;
transform: translateZ(25px);
transform-origin: 50% 50% 25px;
}
.letter.out {
transform: rotateX(90deg);
transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.letter.behind {
transform: rotateX(-90deg);
}
.letter.in {
transform: rotateX(0deg);
transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wisteria {
color: #8e44ad;
}
.belize {
color: #2980b9;
}
.pomegranate {
color: #c0392b;
}
.green {
color: #16a085;
}
.midnight {
color: #003366;
}
p {
color: var(--mainColor);
text-decoration: none;
}
p:hover {
color: transparent;
-webkit-text-stroke: 2px var(--mainColor);
}
@supports not(-webkit-text-stroke: 2px red) {
p:hover {
text-shadow:
3px 3px 0 var(--mainColor),
-1px -1px 0 var(--mainColor),
1px -1px 0 var(--mainColor),
-1px 1px 0 var(--mainColor),
1px 1px 0 var(--mainColor);
}
}
.top-tags{
bottom: auto;
top: 0px;
}
.tags{
color: #515152;
position: absolute;
bottom: 0px;
left: 80px;
font-size: 18px;
font-family: 'La Belle Aurore', cursive;
}
.home-page #demo::before{
content: '<h1>';
font-family: 'La Belle Aurore', cursive;
color: #515152;
font-size: 18px;
position: absolute;
margin-top: -35px;
}
.home-page .word::after{
content: '</h1>';
font-family: 'La Belle Aurore', cursive;
color: #515152;
font-size: 18px;
position: absolute;
margin-top: 18px;
margin-left: 20px;
-webkit-animation: myanim2 1s 1.7s backwards;
animation: myanim2 1s 1.7s backwards;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
@keyframes myanim2 {
0% { opacity: 0;}
100% {opacity: 1;}
}
@-webkit-keyframes myanim2 {
0% { opacity: 0; }
100% {opacity: 1;}
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vivank Sharma</title>
<link rel="stylesheet" href="css/master.css">
<link rel="stylesheet" href="css/master_responsive.css">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=La+Belle+Aurore" rel="stylesheet">
</head>
<body class="noselect">
<div class="page">
<div class="bglogo">
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 89.999 89.999" style="enable-background:new 0 0 89.999 89.999;" xml:space="preserve">
<g>
<path d="M89.551,24.201c-5.029,28.863-33.127,53.301-41.577,58.883c-8.454,5.582-16.163-2.236-18.96-8.148 c-3.201-6.738-12.793-43.285-15.307-46.311C11.195,25.596,3.656,31.65,3.656,31.65L0,26.768c0,0,15.307-18.623,26.957-20.951 c12.35-2.469,12.332,19.318,15.301,31.416c2.873,11.701,4.807,18.398,7.312,18.398c2.514,0,7.311-6.525,12.562-16.531 c5.264-10.016-0.225-18.857-10.505-12.568C55.738,1.395,94.578-4.65,89.551,24.201z" fill="#ff0043"/>
</g>
</svg>
</div>
<div class="home-page" style="opacity=1;">
<span class="tags top-tags"> <html><br> <body> </span>
<div class="text">
<p id="demo"></p><br>
<p id="demo1"></p>
<br>
<p>
<span class="word wisteria">wonderful developer</span>
<span class="word belize">geek developer</span>
<span class="word pomegranate">web developer</span>
<span class="word green">android developer</span>
<span class="word midnight">ML-AI developer</span>
</p>
</div>
<span class="tags bottom-tags"> </body><br> </html> </span>
</div>
</body>
<script type="text/javascript" src="JS/typewriter.js"></script>
</html>Upvotes: 3
Related Questions
- Change stroke and fill color of SVG on hover
- Change stroke colour on svg in html
- How to change svg color on Hover
- Hover change color on SVG
- Changing the color of SVG Icon on hover
- Change color of svg on hover
- How to use css to set svg hover color?
- Change stroke and fill color of SVG when hovered
- Change stroke of background svg on hover
- Change SVG Color on Hover