在jquery中使用CSS3进行svg rect和文本元素转换

Question

请参考以下（工具提示）SVG Group。

<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元素和文本元素的平滑过渡。

我提到了以下链接。

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设置矩形元素的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>

谢谢，

希瓦