実現したいこと
円をホバーしたときにテキストが表示されるようにしたいが、テキストは現在の位置より30pxほど上に移動して表示させたい。
分からないこと
今の状況は以下の通りで、円をホバーした時にテキストは表示されるが、
30px上に表示させるにはcssでどのように指定したらよいか。
html
1<svg width="100%" height="100%" viewBox="0 0 1100 730"> 2<g class="fig"> 3<circle fill="gray" cx="519" cy="138" r="47"/> 4<text x="490" y="200">テキスト</text> 5</g> 6</svg> 7
css
1text{ 2 fill-opacity: 0; 3} 4.fig:hover text{ 5 fill-opacity: 1; 6} 7
<circle>内に、transform="translate( 0, 20 )"を指定するのでなく、cssで指定したいのですが、
無理でしょうか。。よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/11 04:14