css - jqueryでCSS3を使用したsvg rectとテキスト要素の遷移

Question

以下 (ツールチップ) SVG グループを参照してください。

<g id="container_svg_TrackToolTip" transform="translate(83.5,446)">
<rect id="container_svg_ToolTipRect" x="318.75390625" y="-267.1015625" width="109.00390625" height="67" fill="white" stroke-width="1" stroke="black" fill-opacity="0.85" rx="0" ry="0"/><text id="container_svg_ToolTipText" x="326.7804718017578" y="-251.60000610351562" fill="#707070" font-size="12px" font-family="Segoe UI" font-style="Normal " font-weight="Regular" text-anchor="start" dominant-baseline="middle">
<tspan x="326.7804718017578" dy="0">pound</tspan>
<tspan x="326.7804718017578" dy="18">LiteracyRate0.248</tspan><tspan x="326.7804718017578" dy="18">Economic Rate35</tspan>
</text>
</g>

チャートの特定のポイントを移動するたびに、長方形の x と y の位置を変更します。

rect要素とtext要素のスムーズな移行が必要です。

以下のリンクを参考にしました。

http://www.developerdrive.com/2012/05/how-to-make-smooth-transitions-with-css3/

http://blogs.adobe.com/webplatform/2012/03/30/svg-animations-css-animations-css-transitions/

http://www.hongkiat.com/blog/scalable-vector-graphic-css-styling/

jquery経由でrect要素のcssを何かのように設定しようとした

 $("#container_svg_ToolTipRect").css({
                'transition-property': 'x,y',
                '-moz-transition-property': 'x,y', /* Firefox 4 */
                '-webkit-transition-property': 'x,y', /* Safari and Chrome */
                '-o-transition-property': 'x,y',
                'transition-duration': "200ms",
                '-moz-transition-duration': "200ms", /* Firefox 4 */
                '-webkit-transition-duration':"200ms", /* Safari and Chrome */
                '-o-transition-duration': "200ms" /* Opera */
            });

しかし、これは変更を行いません。つまり、トランジション プロパティが機能していない (スムーズなトランジションがない)

テキスト要素についても同じことをする必要があります。

どうしたの。x 属性と y 属性を変更して、rect 要素と text 要素をスムーズに移行するにはどうすればよいですか

何かのようなもの

<svg xmlns="http://www.w3.org/2000/svg">
<style>
    rect {
        fill: black;
    }

    rect:hover {
        fill: teal;
        transition-property: fill;
        transition-duration: 3s;
    }
</style>

<rect width="100" height="100" />
</svg>

ありがとう、

シヴァ