[解決済み] CSS - カーソルを置いたときに塗りつぶしの色を変更する - SVG PATH

質問

私のプロジェクトでsvgパスを使用してモダンuiアイコンパックを使用しています。

ホバー時に塗りつぶしの色を変更したいのですが。

しかし、うまくいきません。

誰かこの件で私を助けてくれることを願っています。

よろしくお願いします。

コード

<div id="Main">
   <ul>
      <li>
          <form>
             <button>
                <div class="inner">
                   <svg>
                     <path d="M35.......etc..">
                     </path>
                   </svg>
                </div>
             </button>
          </form>
      </li>
   </ul>
</div

解決方法は？

以下のようにCSSでsvgの塗りつぶし色を上書きすることができ、また、以下のように異なる要素を対象とすることができます。 <path> polygon circle などです。

#Main svg:hover {
    fill: #fce57e;
}

#Main svg:hover path {
    fill: #fce57e;
}

#Main svg:hover plygon {
    fill: #fce57e;
}

#Main svg:hover circle {
    fill: #fce57e;
}