首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >Power BI 电梯动画箭头

Power BI 电梯动画箭头

作者头像
wujunmin
发布2026-05-19 16:30:15
发布2026-05-19 16:30:15
910
举报

效果如图:

原理是SVG的SMIL动画,将以下SVG度量值放入卡片图、按钮切片器的图像区域使用。

代码语言:javascript
复制
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>"
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2026-05-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 wujunmin 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档