使用悬停的 css 更改不透明度 SVG

Posted 2023-03-06

【中文标题】使用悬停的 css 更改不透明度 SVG

【英文标题】：change opacity SVG with css with hover

【发布时间】：2014-06-23 13:34:23

【问题描述】：

我的 CSS 有问题。

这是我的html：

<nav id="navigation">
    <ul>
        <li>
            <a class="navbtn" href="?page=contact">
            <img src="images\navigation\icons\contact.svg" >
                <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"   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"   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>

我用插画家制作了图标。我想通过在鼠标悬停在图标上时降低透明度来使图标变暗一点。我试过了：

.iconopacity:hover 
     fill-opacity: 0.7; 

但它没有用。我还尝试了其他一些 CSS 选择器，例如：

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

但它也不起作用。

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

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

请帮帮我？ :)

【参考方案1】：

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

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

<div class="change-opacity-svg">
<svg id="Capa_1" data-name="Capa 1"  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;

【参考方案2】：

CSS 不能跨越文件边界。 HTML 中的任何 CSS 都不会影响 SVG。这就像您使用 iframe 包含另一个 HTML 页面一样。父级中的 CSS 不会影响 iframed 页面。

要解决这个问题，您可以使用一个小脚本将您的标签替换为嵌入式 SVG。见：

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

【讨论】：

如果我有一个单独的 css 文件，这也是吗？我在 svg 文件的顶部放置了这一行： a) 图像必须在一个文件中完整。 b) 图像不是交互式的。您需要使用 <iframe> 或 <object> 标记或内联 svg 图像，如果您希望它具有交互性。