
效果如图:

原理是SVG的SMIL动画,将以下SVG度量值放入卡片图、按钮切片器的图像区域使用。
SVG.电梯箭头 =
VAR _UP = "
<rect x='40' y='0' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='30' y='10' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='40' y='10' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='50' y='10' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='20' y='20' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='30' y='20' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='40' y='20' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='50' y='20' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='60' y='20' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='10' y='30' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='20' y='30' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='30' y='30' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='40' y='30' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='50' y='30' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='60' y='30' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='70' y='30' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='30' y='40' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='40' y='40' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='50' y='40' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='30' y='50' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='40' y='50' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='50' y='50' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='30' y='60' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='40' y='60' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='50' y='60' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='30' y='70' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='40' y='70' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='50' y='70' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='30' y='80' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='40' y='80' width='10' height='10' fill='rgb(60, 141, 7)'/>
<rect x='50' y='80' width='10' height='10' fill='rgb(60, 141, 7)'/>
<g stroke='rgb(255, 255, 255)' stroke-width='1'>
<line x1='0' y1='0' x2='0' y2='90'/>
<line x1='10' y1='0' x2='10' y2='90'/>
<line x1='20' y1='0' x2='20' y2='90'/>
<line x1='30' y1='0' x2='30' y2='90'/>
<line x1='40' y1='0' x2='40' y2='90'/>
<line x1='50' y1='0' x2='50' y2='90'/>
<line x1='60' y1='0' x2='60' y2='90'/>
<line x1='70' y1='0' x2='70' y2='90'/>
<line x1='80' y1='0' x2='80' y2='90'/>
<line x1='90' y1='0' x2='90' y2='90'/>
<line x1='0' y1='0' x2='90' y2='0'/>
<line x1='0' y1='10' x2='90' y2='10'/>
<line x1='0' y1='20' x2='90' y2='20'/>
<line x1='0' y1='30' x2='90' y2='30'/>
<line x1='0' y1='40' x2='90' y2='40'/>
<line x1='0' y1='50' x2='90' y2='50'/>
<line x1='0' y1='60' x2='90' y2='60'/>
<line x1='0' y1='70' x2='90' y2='70'/>
<line x1='0' y1='80' x2='90' y2='80'/>
<line x1='0' y1='90' x2='90' y2='90'/>
</g>"
VAR _Down = "
<rect x='30' y='0' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='40' y='0' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='50' y='0' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='30' y='10' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='40' y='10' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='50' y='10' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='30' y='20' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='40' y='20' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='50' y='20' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='30' y='30' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='40' y='30' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='50' y='30' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='30' y='40' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='40' y='40' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='50' y='40' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='10' y='50' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='20' y='50' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='30' y='50' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='40' y='50' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='50' y='50' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='60' y='50' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='70' y='50' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='20' y='60' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='30' y='60' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='40' y='60' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='50' y='60' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='60' y='60' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='30' y='70' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='40' y='70' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='50' y='70' width='10' height='10' fill='rgb(229, 11, 11)'/>
<rect x='40' y='80' width='10' height='10' fill='rgb(229, 11, 11)'/>
<g stroke='rgb(255, 255, 255)' stroke-width='1'>
<line x1='0' y1='0' x2='0' y2='90'/>
<line x1='10' y1='0' x2='10' y2='90'/>
<line x1='20' y1='0' x2='20' y2='90'/>
<line x1='30' y1='0' x2='30' y2='90'/>
<line x1='40' y1='0' x2='40' y2='90'/>
<line x1='50' y1='0' x2='50' y2='90'/>
<line x1='60' y1='0' x2='60' y2='90'/>
<line x1='70' y1='0' x2='70' y2='90'/>
<line x1='80' y1='0' x2='80' y2='90'/>
<line x1='90' y1='0' x2='90' y2='90'/>
<line x1='0' y1='0' x2='90' y2='0'/>
<line x1='0' y1='10' x2='90' y2='10'/>
<line x1='0' y1='20' x2='90' y2='20'/>
<line x1='0' y1='30' x2='90' y2='30'/>
<line x1='0' y1='40' x2='90' y2='40'/>
<line x1='0' y1='50' x2='90' y2='50'/>
<line x1='0' y1='60' x2='90' y2='60'/>
<line x1='0' y1='70' x2='90' y2='70'/>
<line x1='0' y1='80' x2='90' y2='80'/>
<line x1='0' y1='90' x2='90' y2='90'/>
</g>"
RETURN
"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' id='wujunmin'>
<g>
<animateTransform attributeName='transform' type='translate'
from='0 " & IF([M.增长率]>0,90,-90) & "' to='0 " & IF([M.增长率]>0,-90,90) & "'
dur='2s' repeatCount='indefinite' />"
& IF([M.增长率]>0,_UP,_Down) & "
</g>
</svg>"