SVG画像のrectタグをマウスホバーで色を変えたいです。

Question

SVG画像のrectタグの図形の色を、マウスホバー時に色を変えたいのですがうまくいきません。
できるようにする方法を教えていただけますでしょうか。

<rect class="rect1" x="245.551" y="72.796" style="fill:yellowgreen;stroke:#000000;" width="100" height="140"/>
```

```css
.rect1:hover{
  fill: aqua;
}
```

Answer 1

無理やりやるならimportantで行けるかもしれません

fill: aqua !important;

Comments

[退会済みユーザー]

その様な方法もあるのですね！ありがとうございます！

Answer 2

<rect> タグの中に style が直接書かれているため、そちらが優先されています。
style の中身を、CSSファイルの中に記述するようにしてみてください。

Comments

[退会済みユーザー]

無事解決できました！ありがとうございました！