Q&A
やりたいこと
circleをhoverしたとき、円の位置はそのままで拡大したいのですがどう記述したらよろしいでしょうか。
発生している問題
hoverすると斜め右下で円がぶれて拡大されます。
問題のソースコード
SVGで描画した円にクラスを付け、そのクラスに transform: scale(2); を指定しています。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <meta name="viewport" content="width=device-width"> 7 8 <style> 9 .fig_link circle:hover{ 10 transform: scale(2); 11 fill: #42AFE3; 12 } 13 </style> 14 15</head> 16<body> 17 18<svg width="500px" height="500px"> 19 20 <g class="fig_link"> 21 <a xlink:href=""> 22 <circle fill="#fd5" cx="100" cy="100" r="50"/> 23 </a> 24 <text x="80" y="170">text</text> 25 </g> 26 27</svg> 28 29</body> 30</html>
試したこと
classを<a>タグにつけたり、<circle>につけても同じような現象が起こります。
idで指定しましたがダメでした。
回答1件
0
ベストアンサー
transform-originで基点を設定すれば出来ると思います。
css
1 .fig_link circle:hover{ 2 transform: scale(2); 3 transform-origin: 100px 100px; 4 fill: #42AFE3; 5 } 6
投稿2018/05/25 14:26
総合スコア3404
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/26 01:19