は、私はいくつかのHTML内で、このSVGスクリプトを持っているCSSセレクタ

Question

でいっぱいにSVGの色/スタイルを変更する：

<style type="text/css"> 
    .Circle { 
     fill: #ff6666; 
    } 

    #bin { 
     fill: #fff; 
    } 

    .Line { 
     fill: #cccccc; 
    } 
</style>            
<g> 
    <circle class="Circle" id="OuterCircle" cx="15.8" cy="15.2" r="15.2" /> 

    <path class="Path" id="bin" d="M9.6,7.6C9.2,7.8,9,8.3,9.1,8.6c0.1,0.3,0.4,0.5,0.5,0.5h12.5c0.4-0.2,0.6-0.6,0.5-1c-0.1-0.3-0.4-0.5-0.5-0.5h-9H9.6z" /> 
    <path class="Path" id="bin" d="M13.9,6.7c-0.5,0.3-0.8,0.7-1,1c0.3,0,0.6,0,1,0c0-0.2,0-0.3,0-0.5h3.8c0,0.2,0,0.3,0,0.5c0.3,0,0.7,0,1,0c-0.2-0.3-0.5-0.7-1-1C16.6,6,15.1,5.9,13.9,6.7z" /> 
    <path class="Path" id="bin" d="M9.6,9.6h12.5l-1,14.9c0,0-0.1,0.4-0.5,0.5c-0.2,0.1-0.4,0-0.5,0c-2.9,0-5.8,0-8.7,0c-0.1,0-0.3,0.1-0.5,0c-0.3-0.1-0.5-0.4-0.5-0.5C10.2,19.5,9.9,14.5,9.6,9.6z" />  

    <polygon class="Line" points="14.5,12 17.1,12 16.7,22.8 15,22.8 " /> 
    <path class="Line" d="M18,12v10.8h1.7c0.3-3.8,0.6-7.5,0.9-11.3C19.8,11.7,18.9,11.8,18,12z" /> 
    <path class="Line" d="M11,11.5c0.9,0.2,1.8,0.3,2.6,0.5v10.8h-1.7C11.9,22.8,11.9,22.8,11,11.5z" /> 
</g> 

私はあなたがクラス「パス」にカーソルを合わせると、それが変化するように、それのスタイルをしようとしていますクラス "OuterCircle"のスタイル。これまでに試したCSSは機能していないようです。

私がこれまで持ってホバーのための現在のCSSは次のとおりです。

.Circle:hover { 
    fill: #97D0FF; 
} 

g.Path:hover > #OuterCircle { 
    fill: #97D0FF; 
}               

私は別の兄弟コンビネータを使用してみましたが、何も動いていないようにみえて、パス属性は、SVG画像を台無し下にサークル属性を置くこと。私は本当にこれがどのようにsvgで動作するかはわかりません。

Answer 1

CSSに「前の兄弟」セレクタがないため、#OuterCircleを.Path:hoverにスタイル設定することはできません。

ただし、親グループにクラスを追加し、グループがホバリングされたときに#OuterCircleのスタイルを設定することができます。

.Circle { 
 
    fill: #ff6666; 
 
} 
 

 
#bin { 
 
    fill: #fff; 
 
} 
 

 
.Line { 
 
    fill: #cccccc; 
 
} 
 

 
g.icon:hover #OuterCircle { 
 
    fill: #97D0FF; 
 
}

<svg> 
 
    <g class="icon"> 
 
    <circle class="Circle" id="OuterCircle" cx="15.8" cy="15.2" r="15.2" /> 
 

 
    <path class="Path" id="bin" d="M9.6,7.6C9.2,7.8,9,8.3,9.1,8.6c0.1,0.3,0.4,0.5,0.5,0.5h12.5c0.4-0.2,0.6-0.6,0.5-1c-0.1-0.3-0.4-0.5-0.5-0.5h-9H9.6z" /> 
 
    <path class="Path" id="bin" d="M13.9,6.7c-0.5,0.3-0.8,0.7-1,1c0.3,0,0.6,0,1,0c0-0.2,0-0.3,0-0.5h3.8c0,0.2,0,0.3,0,0.5c0.3,0,0.7,0,1,0c-0.2-0.3-0.5-0.7-1-1C16.6,6,15.1,5.9,13.9,6.7z" /> 
 
    <path class="Path" id="bin" d="M9.6,9.6h12.5l-1,14.9c0,0-0.1,0.4-0.5,0.5c-0.2,0.1-0.4,0-0.5,0c-2.9,0-5.8,0-8.7,0c-0.1,0-0.3,0.1-0.5,0c-0.3-0.1-0.5-0.4-0.5-0.5C10.2,19.5,9.9,14.5,9.6,9.6z" />  
 

 
    <polygon class="Line" points="14.5,12 17.1,12 16.7,22.8 15,22.8 " /> 
 
    <path class="Line" d="M18,12v10.8h1.7c0.3-3.8,0.6-7.5,0.9-11.3C19.8,11.7,18.9,11.8,18,12z" /> 
 
    <path class="Line" d="M11,11.5c0.9,0.2,1.8,0.3,2.6,0.5v10.8h-1.7C11.9,22.8,11.9,22.8,11,11.5z" /> 
 
</g> 
 
</svg>