Q&A
#実現したい事
枠線を引いたあとで中を塗るアニメーションを維持したまま、その後でマウスオーバーしたら色を変更するsvgの実装
不具合/試したこと
cssファイルの下2つの要素が機能せずマウスオーバーしても変化がありません。
divで囲ってclassやidで指定したり、pathの中で指定したり試したのですがいずれでも実現できませんでした。
もしわかる方がいましたらお願い致します。
link.html
<html> <head> <link rel="stylesheet" href="css/link.css"> <title> リンク </title> </head> <body> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1740 577"> <a href="https://note.com/"> <path data-name="noteicon" d="M180.388501,169.6969 L180.388501,155.318324 C180.388501,152.698052 180.524171,151.824229 180.927578,150.479979 C182.005733,146.784785 185.646008,144.030448 189.958629,144.030448 C194.27125,144.030448 197.910324,146.851818 198.988479,150.479979 C199.393087,151.824229 199.528757,152.698052 199.528757,155.318324 L199.528757,177.490682 C199.528757,178.834933 199.528757,180.177986 199.258618,181.388171 C198.517837,184.747003 195.485075,187.771866 192.114939,188.510426 C190.902315,188.778558 189.554021,188.778558 188.205726,188.778558 L165.966674,188.778558 C163.33852,188.778558 162.462069,188.644492 161.113775,188.241097 C157.474701,187.166175 154.644843,183.538015 154.644843,179.238327 C154.644843,174.937443 157.474701,171.309283 161.113775,170.234361 C162.462069,169.830966 163.33852,169.6969 165.966674,169.6969 L180.388501,169.6969 Z M259.642514,270.215259 L140.357486,270.215259 L140.357486,165.464245 C140.357486,164.119995 140.829329,162.97804 141.773015,162.037184 L172.705744,131.196024 C173.64943,130.256366 174.79482,129.785938 176.143114,129.785938 L259.642514,129.785938 L259.642514,270.215259 Z M273.18909,106.134066 C272.582778,106.067033 271.773561,106 270.223563,106 L172.974683,106 C171.897728,106 170.819573,106.067033 170.077591,106.134066 C165.6293,106.537461 161.652852,108.620272 158.485621,111.778004 L122.295384,147.859707 C119.129354,151.018637 117.039078,154.981962 116.63567,159.416912 C116.567235,160.155472 116.5,161.230394 116.5,162.305316 L116.5,280.763379 C116.5,282.308729 116.567235,283.115519 116.63567,283.720012 C117.173547,288.759457 121.756307,293.327276 126.81091,293.864737 C127.418423,293.932967 128.226439,294 129.776437,294 L270.223563,294 C271.773561,294 272.582778,293.932967 273.18909,293.864737 C278.243693,293.327276 282.826453,288.759457 283.365531,283.720012 C283.431565,283.115519 283.5,282.308729 283.5,280.763379 L283.5,119.236621 C283.5,117.691271 283.431565,116.884481 283.365531,116.279988 C282.826453,111.240543 278.243693,106.671527 273.18909,106.134066 Z"/> </a> </svg> </body> </html>
link.css
path { fill: none; stroke: #41c9b4; stroke-dasharray: 2000; stroke-dashoffset: 0; stroke-width: 1; -webkit-animation: hello 2s ease-in forwards; animation: hello 2s ease-in forwards; } @-webkit-keyframes hello { 0% { stroke-dashoffset: 2000; fill:transparent; } 50% { fill:transparent; } 100% { stroke-dashoffset: 0; fill:#333; } } @keyframes hello { 0% { stroke-dashoffset: 2000; fill:transparent; } 50% { fill:transparent; } 100% { stroke-dashoffset: 0; fill:#41c9b4; } } .icon { transition: all 0.3s ease 0s; } .icon:hover { fill: #fb8c00; }
回答1件
0
CSSコードの最後の箇所:
css
1.icon:hover { 2 fill: #fb8c00; 3}
の部分を以下のように変更すると、アニメーション後に hover した際にオレンジ色で着色できました。(Google Chrome で確認しました。)
css
1.icon path:hover { 2 fill: #fb8c00 !important; 3 stroke: #fb8c00; 4}
投稿2021/06/03 16:57
総合スコア72
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。