Power BI 切片器悬停框选动画

wujunmin

发布于 2025-02-10 15:47:27

3000

代码可运行

文章被收录于专栏：wujunminwujunmin

运行总次数：0

代码可运行

Power BI新切片器视觉对象可以借助SVG实现非常实用的动画效果。

本例实现了鼠标悬停动画框选提示：

复制下方SVG代码到空白SVG文件进行使用。

动画下划线代码：

<svg width="200" height="50" id="wujunmin" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 49L200 49"  stroke="tomato" stroke-width="2">
    <animate
      attributeName="stroke-dasharray"
      values="0,200; 200,200"
      dur="1s"
      repeatCount="indefinite"
    />
  </path>
</svg>

旋转虚线边框：

<svg width="200" height="50" id="wujunmin" xmlns="http://www.w3.org/2000/svg">
  <path d="M1 49L199 49,199 1,1 1Z"  stroke="tomato" stroke-width="2" fill="none" stroke-dasharray='5'>
    <animate attributeName="stroke-dashoffset" values="0; -500" 
             dur="10s" repeatCount="indefinite" />
  </path>
</svg>

闪烁边框：

<svg width="200" height="50" id="wujunmin" xmlns="http://www.w3.org/2000/svg">
  <path d="M2 48L198 48,198 2,2Z"  stroke="tomato" stroke-width="4" fill="none">
  <animate attributeName="stroke-opacity" values="1; 0; 1" 
             dur="1s" repeatCount="indefinite" />
  </path>
</svg>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-08-04，如有侵权请联系 cloudcommunity@tencent.com 删除

对象