Javascript Greensock动画不适用于SVG高度
我只想做一个非常简单的tweenMax动画,其中条的高度从Javascript Greensock动画不适用于SVG高度,javascript,svg,gsap,Javascript,Svg,Gsap,我只想做一个非常简单的tweenMax动画,其中条的高度从“0”到“100%”,现在我的SVG如下所示: <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 69 64" style="enable-background:new 0 0 69 64;" xm
“0”
到“100%”
,现在我的SVG如下所示:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 69 64" style="enable-background:new 0 0 69 64;" xml:space="preserve">
<style type="text/css">
.st0{fill:#712215;}
.st1{fill:none;stroke:#712215;stroke-miterlimit:10;}
</style>
<path id="XMLID_8_" class="st0" d="M23,47.4h-5.4c-0.6,0-1-0.5-1-1v-6.9c0-0.5,0.4-1,1-1H23c0.5,0,1,0.5,1,1v6.9
C24,47,23.5,47.4,23,47.4z"/>
<path id="XMLID_7_" class="st0" d="M31.9,47.4h-5.4c-0.5,0-1-0.5-1-1V32.9c0-0.5,0.5-1,1-1h5.4c0.6,0,1,0.5,1,1v13.5
C32.9,47,32.5,47.4,31.9,47.4z"/>
<path id="XMLID_6_" class="st0" d="M41.9,47.4h-5.4c-0.6,0-1-0.5-1-1V36c0-0.5,0.4-1,1-1h5.4c0.5,0,1,0.5,1,1v10.5
C42.9,47,42.5,47.4,41.9,47.4z"/>
<path id="XMLID_5_" class="st0" d="M51,47.4h-5.4c-0.5,0-1-0.5-1-1V30c0-0.5,0.5-1,1-1H51c0.6,0,1,0.5,1,1v16.4
C52,47,51.5,47.4,51,47.4z"/>
<polygon id="XMLID_4_" class="st0" points="16.6,35 18,36.4 29.6,25.6 38.9,33 49.3,21.9 47.3,20 38.9,29.5 29.2,21.8 15.9,34.5 "/>
<polygon id="XMLID_3_" class="st0" points="43.2,17.8 51.7,17.9 51.9,26 "/>
<rect id="XMLID_2_" x="2.5" y="11.6" class="st1" width="63.5" height="40.8"/>
</svg>
但是高度动画似乎不起作用,有人能指出我到底做错了什么吗
多谢各位 问题是,
高度
不是path元素支持的属性
一个简单的解决方法是使用transform:scaleY
:
TweenMax.fromTo($('path')[0], 2, {
css: {
transform: 'scaleY(0)'
// height: 0
}
}, {
css: {
transform: 'scaleY(1)'
//height: '100px'
}
});
对于更定制的解决方案,您可能会考虑更改
d
属性…通常我会使用clipPath并将整个栏移到顶部。看
TweenMax.fromTo($('path')[0], 2, {
css: {
transform: 'scaleY(0)'
// height: 0
}
}, {
css: {
transform: 'scaleY(1)'
//height: '100px'
}
});
<clipPath id="myClip">
<path d="M23,47.4h-5.4c-0.6,0-1-0.5-1-1v-6.9c0-0.5,0.4-1,1-1H23c0.5,0,1,0.5,1,1v6.9
C24,47,23.5,47.4,23,47.4z" />
</clipPath>
<g clip-path="url(#myClip)">
<g id="path0" transform="translate(0 10)">
<path id="XMLID_8_" class="st0" d="M23,47.4h-5.4c-0.6,0-1-0.5-1-1v-6.9c0-0.5,0.4-1,1-1H23c0.5,0,1,0.5,1,1v6.9
C24,47,23.5,47.4,23,47.4z" />
</g>
</g>