1

请参考以下（工具提示）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 位置。

我需要一些矩形元素和文本元素的平滑过渡。

我提到了以下链接。

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>

谢谢，

湿婆

4

0 回答 0