css - 用悬停的CSS改变不透明度SVG

Question

我的 CSS 有问题。

这是我的 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>

这是我的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;
}

这是我的 svg 文件:

<?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>

我用 illustrator 制作了图标。当鼠标悬停在图标上时，我想通过降低透明度来使图标更暗一点。我试过:

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

但是没有用。我还尝试了一些其他的 css 选择器，比如:

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

但是也没用。

我认为我在将鼠标悬停在链接上时选择了错误的 css 路径，但问题也可能是完全不同的。

我认为这个问题也可以通过使用 javascript 来解决，但我不喜欢 javascript，我认为应该可以使用 css 来解决。

请帮帮我好吗？ :)

Answer 1

你不能改变 svg 的不透明度，但你可以做的是改变父元素的不透明度，你会得到同样的效果

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;
}