I want in my svg the hover effect like that the one I showed in the gif, but I am unable to achieve that →
1 Like
Hi codeispoetry,
I don’t know a whole lot about svg. From looking at your paypal example image I assume you want the fill color and background colors interchanging with your facebook svg.
After I removed the fill color from the svg the css was able to swap them out on hover. Also, I removed the dimensions from the svg and let the css control it. Not sure if that was necessary or if it causes any ill effects.
See if this gets close to what you are after…
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Facebook SVG image hover</title>
<style>
svg.facebook {
width:3.2em;
height:auto;
margin: 50px;
padding:.25em;
border-radius: 50%;
fill: #45abff;
background:#0e1a25;
transition: background 0.5s, transform 0.5s ease-out, fill 0.5s;
}
svg.facebook:hover {
fill: #0e1a25;
background:#45abff;
transform: scale(1.5);
transition: background 0.5s, transform 0.5s ease-out, fill 0.5s;
}
</style>
</head>
<body>
<svg class="facebook" 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 155.139 155.139" style="enable-background:new 0 0 155.139 155.139;">
<g>
<path id="f_1_" d="M89.584,155.139V84.378h23.742l3.562-27.585H89.584V39.184 c0-7.984,2.208-13.425,13.67-13.425l14.595-0.006V1.08C115.325,0.752,106.661,0,96.577,0C75.52,0,61.104,12.853,61.104,36.452 v20.341H37.29v27.585h23.814v70.761H89.584z" />
</g>
</svg>
</body>
</html>
2 Likes
Yes, that is right.
1 Like
can you please try putting your code into the code pen. It doesn’t seem to render the anticipated result.
Ray.H’s code is in the form of a “working page”. He is trying to figure out what you want to see. As such, it is not expected to be plug-n-play compatible with your code. You can copy and paste it directly into a file on your PC and open it in your favorite browser. Have you done that? If not, please try it. Otherwise post an image that shows what the expected result should look like.
Hi,
As ronpat mentioned you will need to explain what your “anticipated result” is.
However, I will point out some expectations I have…
- I expect there will be more social icons to come
- I expect there will be links, so the images would be nested in anchors
- With anchors present it will change how you target and style the svg/imgs
- With multiple anchors, they should be wrapped by a parent element to control them
So taking all that into consideration I took the test code a few steps further. But depending on where these links are located in your page could certainly change the styles needed on the parent container. I don’t know what or how many additional icons there may be so I just used the facebook svg as two more placeholders.
The revised (test) code below should render as a stand alone page in your browser like this…
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SVG image hover</title>
<style>
.social {
display:inline-block; /*shrinkwrap to child widths*/
margin:2em;
text-align:center;/*center the anchors*/
outline:1px solid red; /*visual testing*/
}
.social a {
display:inline-block;
vertical-align:bottom;
margin:.25em .5em;
text-decoration: none;
outline:1px solid red;/*visual testing*/
}
.social a img,
.social a svg {display:block;}
.social a .facebook {
width:3.2em;
height:auto;
padding:.25em;
border-radius: 50%;
fill: #45abff;
background:#0e1a25;
transition: background 0.5s, transform 0.5s ease-out, fill 0.5s;
}
.social a:hover .facebook {
fill: #0e1a25;
background:#45abff;
transform:scale(1.5);
transition:background 0.5s, transform 0.5s ease-out, fill 0.5s;
}
</style>
</head>
<body>
<div class="social">
<a href="#" title="Like Us">
<svg class="facebook" x="0px" y="0px" viewBox="0 0 155.139 155.139" style="enable-background:new 0 0 155.139 155.139;">
<g>
<path d="M89.584,155.139V84.378h23.742l3.562-27.585H89.584V39.184 c0-7.984,2.208-13.425,13.67-13.425l14.595-0.006V1.08C115.325,0.752,106.661,0,96.577,0C75.52,0,61.104,12.853,61.104,36.452 v20.341H37.29v27.585h23.814v70.761H89.584z" />
</g>
</svg>
</a>
<a href="#" title="Like Us">
<svg class="facebook" x="0px" y="0px" viewBox="0 0 155.139 155.139" style="enable-background:new 0 0 155.139 155.139;">
<g>
<path d="M89.584,155.139V84.378h23.742l3.562-27.585H89.584V39.184 c0-7.984,2.208-13.425,13.67-13.425l14.595-0.006V1.08C115.325,0.752,106.661,0,96.577,0C75.52,0,61.104,12.853,61.104,36.452 v20.341H37.29v27.585h23.814v70.761H89.584z" />
</g>
</svg>
</a>
<a href="#" title="Like Us">
<svg class="facebook" x="0px" y="0px" viewBox="0 0 155.139 155.139" style="enable-background:new 0 0 155.139 155.139;">
<g>
<path d="M89.584,155.139V84.378h23.742l3.562-27.585H89.584V39.184 c0-7.984,2.208-13.425,13.67-13.425l14.595-0.006V1.08C115.325,0.752,106.661,0,96.577,0C75.52,0,61.104,12.853,61.104,36.452 v20.341H37.29v27.585h23.814v70.761H89.584z" />
</g>
</svg>
</a>
</div>
</body>
</html>
4 Likes
Hello there, and thanks a lot as always your help is a Pro++. You always help beyond limits; Not just one time, but you keep on amending the codes at your machine, and comes out with the best version even a day or two later. Thank you so much and happy new years and hope you get what you deserve all the happiness in all the days of your life.
Coming back to the thread I have posted your code on the code pen here →
and also on my direct website here.
I have a question. Did you make some direct changes to the SVG such as putting X=0px etc?
Hi there,
Happy New Year to you too.
I didn’t add anything, but here’s what I removed the from the svg…
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1"
width="512px" height="512px"
fill="#45abff"
1 Like
I am using .svg instead putting the whole code, but don’t know what is a conflict that the height of those images is setting 0?
Please see the footer.
The svg’s could be found here.
May this CSS needs to be altered:
Then I believe you will need to put back in the xmlns attribute in the svg file for it to work.
e.g.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="foofacebook" x="0px" y="0px" viewBox="0 0 155.139 155.139" style="enable-background:new 0 0 155.139 155.139;">
<g>
<path d="M89.584,155.139V84.378h23.742l3.562-27.585H89.584V39.184 c0-7.984,2.208-13.425,13.67-13.425l14.595-0.006V1.08C115.325,0.752,106.661,0,96.577,0C75.52,0,61.104,12.853,61.104,36.452 v20.341H37.29v27.585h23.814v70.761H89.584z"/>
</g>
</svg>
2 Likes
Thanks. Indeed a great learning for me today.
Icons have come, but the classes don’t work.
svg code in the twitter.svg, for example, looks like this:
<?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 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve" width="512px" height="512px" class="footwitter">
<g>
<g>
<path d="M612,116.258c-22.525,9.981-46.694,16.75-72.088,19.772c25.929-15.527,45.777-40.155,55.184-69.411 c-24.322,14.379-51.169,24.82-79.775,30.48c-22.907-24.437-55.49-39.658-91.63-39.658c-69.334,0-125.551,56.217-125.551,125.513 c0,9.828,1.109,19.427,3.251,28.606C197.065,206.32,104.556,156.337,42.641,80.386c-10.823,18.51-16.98,40.078-16.98,63.101 c0,43.559,22.181,81.993,55.835,104.479c-20.575-0.688-39.926-6.348-56.867-15.756v1.568c0,60.806,43.291,111.554,100.693,123.104 c-10.517,2.83-21.607,4.398-33.08,4.398c-8.107,0-15.947-0.803-23.634-2.333c15.985,49.907,62.336,86.199,117.253,87.194 c-42.947,33.654-97.099,53.655-155.916,53.655c-10.134,0-20.116-0.612-29.944-1.721c55.567,35.681,121.536,56.485,192.438,56.485 c230.948,0,357.188-191.291,357.188-357.188l-0.421-16.253C573.872,163.526,595.211,141.422,612,116.258z" fill="#45abff"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Hi,
Yes, as a standalone .svg file the XML Namespace is required. It can be eliminated when the svg is embedded in an html file.
When SVG is parsed as a XML, for compliance with the Namespaces in XML Recommendation [xml-names], an SVG namespace declaration must be provided so that all SVG elements are identified as belonging to the SVG namespace.
When using the HTML syntax, the namespace is provided automatically by the HTML parser.
` As the example shows there's no need to have an ‘xmlns’ attribute declaring that the element is in the SVG namespace when using the HTML parser. The HTML parser will automatically create the SVG elements in the proper namespace.
`
There is some more discussion on it here at stackoverflow
It even looks like the xlink can also be eliminated in an .svg file
xmlns:xlink="http://www.w3.org/1999/xlink"
2 Likes
sir,
can you please have a look at this:
I don’t believe you can access anything on svgs referenced externally through the image tag. (Just as you can’t change the drawing on an image from the css.) You can put a class on the img tag and size it accordingly but you wont be able to access anything specifically on the svg.
2 Likes
By re working your selectors and adding the appropriate classes to the anchors the following works for me.
Once again this is a standalone page that would need to will reference img/svg/ through the base tag I just inserted in the head tag
EDIT: As Paul just mentioned, you won’t be able to swap out fill colors or any other styles in the .svg img files. You can transform the size and add background colors on hover
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="http://codepen.trafficopedia.com/html01/">
<title>Test Page</title>
<style>
.text_align {text-align: center;}
.foosocial {
display:inline-block; /*shrinkwrap to child widths*/
/*margin:2em;*/
text-align:center;/*center the anchors*/
/*outline:1px solid red; /*visual testing*/
}
.foosocial a {
display:inline-block;
vertical-align:bottom;
margin:.25em 1.5em;
text-decoration: none;
/*outline:1px solid red;/*visual testing*/
}
.foosocial a img,
.foosocial a svg {display:block;}
.foosocial a img {
width: 50px;
height: auto;
}
.foosocial a.facebook {
width:3.2em;
height:auto;
padding:.25em;
fill: #3B5998;
transition: background 0.5s, transform 0.5s ease-out, fill 0.5s;
}
.foosocial a.facebook:hover {
border-radius: 50%;
fill: #FFFFFF;
background:#3B5998;
transform:scale(1.5);
transition:background 0.5s, transform 0.5s ease-out, fill 0.5s;
}
.foosocial a.googleplus {
width:3.2em;
height:auto;
padding:.25em;
fill: #3B5998;
transition: background 0.5s, transform 0.5s ease-out, fill 0.5s;
}
.foosocial a.googleplus:hover {
border-radius: 50%;
fill: #FFFFFF;
background:#3B5998;
transform:scale(1.5);
transition:background 0.5s, transform 0.5s ease-out, fill 0.5s;
}
.foosocial a.twitter {
width:3.2em;
height:auto;
padding:.25em;
fill: #3B5998;
transition: background 0.5s, transform 0.5s ease-out, fill 0.5s;
}
.foosocial a.twitter:hover {
border-radius: 50%;
fill: #FFFFFF;
background:#3B5998;
transform:scale(1.5);
transition:background 0.5s, transform 0.5s ease-out, fill 0.5s;
}
</style>
</head>
<body>
<div class="footwo text_align">
<div class="foosocial">
<a class="facebook" href="#" title="Like Us">
<img src="img/svg/facebook.svg" alt="">
</a>
<a class="googleplus" href="#" title="G-Plus Us">
<img src="img/svg/googleplus.svg" alt="">
</a>
<a class="twitter" href="#" title="Tweet Us">
<img src="img/svg/twitter.svg" alt="">
</a>
</div>
</div>
</body>
</html>
2 Likes
For now, it looks like that, for now, I am able to make it work by directly pasting the SVG code in the HTML, but I have some request when we hover that circle that emerges cuts the logo, for example, twitters bird peak gets distorted, facebook logos top gets distorted. what is the fix? I try adjusting padding, but that didn’t let go the things.
Hi,
I’m looking through everything now, will post back
1 Like
I think you need to get some input from an svg expert like @John_Betong
Let’s see if he comes along with some insight.
This might get resolved by adjusting the viewBox attribute in the svg
In the meantime I was able to get your code cleaned up and did a temporary fix on the clipping problem by changing the border radius to 32% and a little padding. It’s no longer a circle but it doesn’t look too bad for now, it’s a smoother transition back to square.
Also reworked your selectors by grouping all the common styles together
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
.text_align {text-align:center; margin:50px;}
.foosocial {
display: inline-block;
text-align: center;/*center the anchors*/
}
.foosocial a {
display: inline-block;
vertical-align: bottom;
margin: .25em 1.25em;
text-decoration: none;
}
.foosocial a .foofacebook,
.foosocial a .foogoogleplus,
.foosocial a .footwitter {
display: block;
width: 60px; /*4.2em*/
height: 60px;
padding: 10px;
}
.foosocial a:hover .foofacebook,
.foosocial a:hover .foogoogleplus,
.foosocial a:hover .footwitter {
border-radius: 32%;
transform: scale(1.5);
}
.foosocial a .foofacebook {
fill: #3B5998;
transition: background 0.5s, transform 0.5s ease-out, fill 0.5s;
}
.foosocial a:hover .foofacebook {
fill: #FFFFFF;
background: #3B5998;
transition: background 0.5s, transform 0.5s ease-out, fill 0.5s;
}
.foosocial a .foogoogleplus {
fill: #D34836;
transition: background 0.5s, transform 0.5s ease-out, fill 0.5s;
}
.foosocial a:hover .foogoogleplus {
fill: #FFFFFF;
background: #D34836;
transition: background 0.5s, transform 0.5s ease-out, fill 0.5s;
}
.foosocial a .footwitter {
fill: #0084B4;
transition: background 0.5s, transform 0.5s ease-out, fill 0.5s;
}
.foosocial a:hover .footwitter {
fill: #FFFFFF;
background: #0084B4;
transition: background 0.5s, transform 0.5s ease-out, fill 0.5s;
}
</style>
</head>
<body>
<div class="footwo text_align">
<div class="foosocial">
<a href="#" title="Like Us">
<svg class="foofacebook" x="0px" y="0px" viewBox="0 0 155.139 155.139" width="512px" height="512px">
<g>
<path d="M89.584,155.139V84.378h23.742l3.562-27.585H89.584V39.184 c0-7.984,2.208-13.425,13.67-13.425l14.595-0.006V1.08C115.325,0.752,106.661,0,96.577,0C75.52,0,61.104,12.853,61.104,36.452 v20.341H37.29v27.585h23.814v70.761H89.584z" />
</g>
</svg>
</a>
<a href="#" title="G+ Us">
<svg class="foogoogleplus" x="0px" y="0px" viewBox="0 0 56.693 56.693" width="56.693px" height="56.693px">
<g>
<path d="M52.218,25.852h-7.512v-7.51c0-0.573-0.465-1.039-1.037-1.039H41.53c-0.576,0-1.041,0.466-1.041,1.039v7.51h-7.512 c-0.572,0-1.039,0.467-1.039,1.041v2.139c0,0.574,0.467,1.039,1.039,1.039h7.512v7.514c0,0.574,0.465,1.039,1.041,1.039h2.139 c0.572,0,1.037-0.465,1.037-1.039V30.07h7.512c0.572,0,1.039-0.465,1.039-1.039v-2.139C53.257,26.318,52.79,25.852,52.218,25.852z"/>
<path d="M26.974,32.438c-1.58-1.119-3.016-2.76-3.041-3.264c0-0.918,0.082-1.357,2.141-2.961c2.662-2.084,4.128-4.824,4.128-7.719 c0-2.625-0.802-4.957-2.167-6.595h1.059c0.219,0,0.434-0.068,0.609-0.196l2.955-2.141c0.367-0.263,0.521-0.732,0.381-1.161 c-0.141-0.428-0.537-0.72-0.988-0.72H18.835c-1.446,0-2.915,0.255-4.357,0.751c-4.816,1.661-8.184,5.765-8.184,9.978 c0,5.969,4.624,10.493,10.805,10.635c-0.121,0.473-0.182,0.939-0.182,1.396c0,0.92,0.233,1.791,0.713,2.633c-0.056,0-0.11,0-0.17,0 c-5.892,0-11.21,2.891-13.229,7.193c-0.526,1.119-0.794,2.25-0.794,3.367c0,1.086,0.279,2.131,0.826,3.113 c1.269,2.27,3.994,4.031,7.677,4.961c1.901,0.48,3.944,0.725,6.065,0.725c1.906,0,3.723-0.246,5.403-0.732 c5.238-1.521,8.625-5.377,8.625-9.828C32.032,37.602,30.659,35.045,26.974,32.438z M10.283,42.215c0-3.107,3.947-5.832,8.446-5.832 h0.121c0.979,0.012,1.934,0.156,2.834,0.432c0.309,0.213,0.607,0.416,0.893,0.611c2.084,1.42,3.461,2.357,3.844,3.861 c0.09,0.379,0.135,0.758,0.135,1.125c0,3.869-2.885,5.83-8.578,5.83C13.663,48.242,10.283,45.596,10.283,42.215z M14.377,12.858 c0.703-0.803,1.624-1.227,2.658-1.227l0.117,0.002c2.921,0.086,5.716,3.341,6.23,7.256c0.289,2.192-0.199,4.253-1.301,5.509 c-0.705,0.805-1.613,1.229-2.689,1.229c0,0,0,0-0.002,0h-0.047c-2.861-0.088-5.716-3.467-6.227-7.377 C12.829,16.064,13.289,14.099,14.377,12.858z"/>
</g>
</svg>
</a>
<a href="#" title="Tweet Us">
<svg class="footwitter" x="0px" y="0px" viewBox="0 0 612 612" width="512px" height="512px">
<g>
<path d="M612,116.258c-22.525,9.981-46.694,16.75-72.088,19.772c25.929-15.527,45.777-40.155,55.184-69.411 c-24.322,14.379-51.169,24.82-79.775,30.48c-22.907-24.437-55.49-39.658-91.63-39.658c-69.334,0-125.551,56.217-125.551,125.513 c0,9.828,1.109,19.427,3.251,28.606C197.065,206.32,104.556,156.337,42.641,80.386c-10.823,18.51-16.98,40.078-16.98,63.101 c0,43.559,22.181,81.993,55.835,104.479c-20.575-0.688-39.926-6.348-56.867-15.756v1.568c0,60.806,43.291,111.554,100.693,123.104 c-10.517,2.83-21.607,4.398-33.08,4.398c-8.107,0-15.947-0.803-23.634-2.333c15.985,49.907,62.336,86.199,117.253,87.194 c-42.947,33.654-97.099,53.655-155.916,53.655c-10.134,0-20.116-0.612-29.944-1.721c55.567,35.681,121.536,56.485,192.438,56.485 c230.948,0,357.188-191.291,357.188-357.188l-0.421-16.253C573.872,163.526,595.211,141.422,612,116.258z"/>
</g>
</svg>
</a>
</div>
</div>
</body>
</html>
1 Like
In the meanwhile could this help somehow →
In viewbox when we set y-axis to 180 that fixes the issue.
Reference → https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
The value of the viewBox attribute is a list of four numbers min-x, min-y, width and height, separated by whitespace and/or a comma, which specify a rectangle in user space which should be mapped to the bounds of the viewport established by the given element, taking into account attribute preserveAspectRatio.
I mean min-y.
#Update →
In Facebook, I tried changing things from →
viewBox="0 0 155.139 155.139"
to
viewBox="0 0 180 155.139"
it worked, but in other, it is not adjusting.