change opacity SVG with css with hover

Question

i have a problem with my css.

this is my html:

<nav id="navigation">
    <ul>
        <li>
            <a class="navbtn" href="?page=contact">
            <img src="images\navigation\icons\contact.svg" width="25px">
                <p>contact</p>      
            </a>
        </li>
    </ul>
</nav>

this is my css:

#navigation ul:nth-child(1) li a:hover {
text-shadow: 0px 0px 20px black;
opacity: 1.0;

}

.iconopacity {
    fill-opacity: 0.3;
}

.iconopacity:hover {
    pointer-events: all;
    fill-opacity: 0.7 !important;
}

this is my svg file:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="http://localhost/project0/html/css/stylesheet.css" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="original_path" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
<!----------- This path ----------->
<path class="iconopacity" id="orignil_path" fill-rule="evenodd" clip-rule="evenodd" d="M0,225C0,161.667,0,98.333,0,35
    c85.333,0,170.667,0,256,0c0,63.333,0,126.667,0,190C170.668,225,85.334,225,0,225z M25.332,202.221c68.432,0,136.932,0,204.402,0
    c-21.992-22.172-44.305-44.666-67.131-67.68c-11.23,8.526-22.83,17.333-34.676,26.326c-12.121-9.238-23.702-18.064-34.823-26.539
    C70.061,157.412,47.765,179.749,25.332,202.221z M224.938,57.804c-65.219,0-128.867,0-193.869,0
    c32.862,25.143,64.67,49.479,96.9,74.138C160.271,107.245,192.09,82.918,224.938,57.804z M72.994,118.891
    c-16.509-12.629-32.893-25.163-50.122-38.343c0,30.421,0,59.434,0,88.337C39.514,152.285,55.936,135.905,72.994,118.891z
     M233.225,168.928c0-28.898,0-57.963,0-88.462c-17.469,13.359-33.963,25.973-50.109,38.32
    C200.168,135.85,216.629,152.321,233.225,168.928z"/>
<g id="shadow">
    <defs>
        <path id="mask_layer" d="M0,225C0,161.667,0,98.333,0,35c85.333,0,170.667,0,256,0c0,63.333,0,126.667,0,190
            C170.668,225,85.334,225,0,225z M25.332,202.221c68.432,0,136.932,0,204.402,0c-21.992-22.172-44.305-44.666-67.131-67.68
            c-11.23,8.526-22.83,17.333-34.676,26.326c-12.121-9.238-23.702-18.064-34.823-26.539
            C70.061,157.412,47.765,179.749,25.332,202.221z M224.938,57.804c-65.219,0-128.867,0-193.869,0
            c32.862,25.143,64.67,49.479,96.9,74.138C160.271,107.245,192.09,82.918,224.938,57.804z M72.994,118.891
            c-16.509-12.629-32.893-25.163-50.122-38.343c0,30.421,0,59.434,0,88.337C39.514,152.285,55.936,135.905,72.994,118.891z
             M233.225,168.928c0-28.898,0-57.963,0-88.462c-17.469,13.359-33.963,25.973-50.109,38.32
            C200.168,135.85,216.629,152.321,233.225,168.928z"/>
    </defs>
    <clipPath id="mask_layer_1_">
        <use xlink:href="#mask_layer"  overflow="visible"/>
    </clipPath>
    <g id="shadow_layer" opacity="0.7" clip-path="url(#mask_layer_1_)">

            <image overflow="visible" opacity="0.7" width="358" height="330" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWYAAAFKCAYAAAAuSPVbAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAOOJJREFUeNrsnQtz4sqShEtC4PHM
/f+/dM+MDUjanVj6nnJSj5YAI4nMCAV+zthY+khlV1eJ<!----- very long list of characters ------>rwAB4G1SmkeE/2QAAAABJRU5ErkJggg==" transform="matrix(1 0 0 1 -56 -29)">
        </image>
        <g>
            <g>
                <path d="M224.938,57.804c-65.219,0-128.867,0-193.869,0c32.862,25.143,64.67,49.479,96.9,74.138
                    C160.271,107.245,192.09,82.918,224.938,57.804z"/>
                <path d="M233.225,168.928c0-28.898,0-57.963,0-88.462c-17.469,13.359-33.963,25.973-50.109,38.32
                    C200.168,135.85,216.629,152.321,233.225,168.928z"/>
                <path d="M127.928,160.867c-12.121-9.238-23.702-18.064-34.823-26.539c-23.044,23.084-45.34,45.421-67.773,67.893
                    c68.432,0,136.932,0,204.402,0c-21.992-22.172-44.305-44.666-67.131-67.68C151.373,143.067,139.773,151.874,127.928,160.867z"/>
                <path d="M22.873,80.548c0,30.421,0,59.434,0,88.337c16.641-16.6,33.063-32.979,50.122-49.994
                    C56.485,106.262,40.102,93.728,22.873,80.548z"/>
                <path d="M-38-18.333V275h321.333V-18.333H-38z M256,225c-85.332,0-170.666,0-256,0C0,161.667,0,98.333,0,35
                    c85.333,0,170.667,0,256,0C256,98.333,256,161.667,256,225z"/>
            </g>
        </g>
    </g>
</g>
</svg>

I made the icon with illustrator. I want to make the icon a little bit darker, by decreasing the transparancy when the mouse hovers over the icon. I tried it with:

.iconopacity:hover {
     fill-opacity: 0.7; 
}

but it didn't work. i also tried it with a bunch of other css selectors like:

  #navigation ul:nth-child(1) li a:hover .iconopacity { css here }

but it didn't work either.

I think i'm selecting the path wrong with my css while hovering over the link, but the problem could also be something entirely different.

I think the problem could also be solved by using javascript, but i'm not in to javascript, and i think it should be possible to do with css.

please help me? :)

Answer 1

u cant change the opacity of a svg but what u can do is change the opacity of the parent element and you will have the same effect

https://jsfiddle.net/6ncydmhw/1/

<div class="change-opacity-svg">
<svg id="Capa_1" data-name="Capa 1" height="40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.2 60.64"><defs></defs><title>google+</title><path class="google-plus-1" d="M30.6,2.45A27.92,27.92,0,1,0,58.52,30.37,27.92,27.92,0,0,0,30.6,2.45ZM33.22,37.9c-3.24,4.56-9.74,5.89-14.81,3.93a13,13,0,0,1,4.72-25.16,13.2,13.2,0,0,1,8.7,3.21,46.8,46.8,0,0,1-3.3,3.42c-3-2-7.17-2.63-10.13-.27A8.33,8.33,0,0,0,18,36c4,3.59,11.44,1.81,12.54-3.69-2.48,0-5,0-7.45-.08,0-1.48,0-3,0-4.44,4.15,0,8.29,0,12.45,0C35.82,31.31,35.36,35,33.22,37.9Zm14.33-4.76v3h-  4v-3h-3v-4h3v-3h4v3h3v4h-3Z"/></svg>
</div>



.google-plus-1{
fill:#dc4e41;
}
.change-opacity-svg:hover{
opacity:0.6;
}

Answer 2

CSS does not work over file boundaries. Any CSS in your HTML will not affect the SVG. It's just the same as if you were including another HTML page using an iframe. CSS in the parent would have no affect on the iframed page.

What you can do to get around this is use a little script to replace your tags with embedded SVG. See:

How to change color of SVG image using CSS (jQuery SVG image replacement)?