SVGの<text>を上に30px移動したい

Question

実現したいこと

円をホバーしたときにテキストが表示されるようにしたいが、テキストは現在の位置より30pxほど上に移動して表示させたい。

分からないこと

今の状況は以下の通りで、円をホバーした時にテキストは表示されるが、
30px上に表示させるにはcssでどのように指定したらよいか。

<svg width="100%" height="100%" viewBox="0 0 1100 730">
<g class="fig">
<circle fill="gray" cx="519" cy="138" r="47"/>
<text x="490" y="200">テキスト</text>
</g>
</svg>

text{
  	fill-opacity: 0;
}
.fig:hover text{
	fill-opacity: 1;
}

<circle>内に、transform="translate( 0, 20 )"を指定するのでなく、cssで指定したいのですが、
無理でしょうか。。よろしくお願いいたします。

Answer 1

ほとんど答えにたどり着いてらっしゃいますね。

text{
  fill-opacity: 0;
  transform: translateY(-30px);
}

Comments

[a_a]

macaron_xxxさん

ご回答いただきありがとうございます！
ちゃんと上に表示されました！！

Answer 2

わざわざCSSで指定しなくても、ホバーしていないときは見えていないので、yの値を30pxずらせば良いと思います。

<svg width="100%" height="100%" viewBox="0 0 1100 730">
<g class="fig">
<circle fill="gray" cx="519" cy="138" r="47"/>
<text x="490" y="170">テキスト</text>
</g>
</svg>

Comments

[a_a]

kszk311さん
ご回答いただきありがとうございます！

実際にしたいことが複雑でどのように質問したら良いのか迷ってしまったのでこのような質問になってしまいました。。
たくさん円があって、円Aをホバーすると円Aのテキストはその位置で表示、円Aをホバーすると関連する円Bは30px上に表示というふうに、テキストの表示位置を変えたかったからです。

質問が不十分ですみません、、