如何利用 SVG 实现不规则进度条的动态效果？-html教程-PHP中文网

如何利用 SVG 实现不规则进度条的动态效果？

碧海醫心

发布： 2024-11-10 12:01:49

原创

649人浏览过

如何利用 SVG 实现不规则进度条的动态效果？

前端不规则进度条的实现思路：

对于不规则 svg 元素进度条的需求，有两种可行的方案：

方案一：动态切图

该方案基于切图实现，将 svg 切分为多张图片，然后根据进度显示不同的图片。虽然这种方法比较粗暴，但实现简单。

方案二：动态修改 svg

该方案通过 js 连续修改 svg 的蒙版高度和填充颜色来实现进度条效果。这种方法可以保持 svg 的完整性，实现的进度条也更加平滑。但是，这种方法对 svg 的结构有要求，svg 的蒙版必须是矩形并且可以控制高度。

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

实现思路（方案二）：

找到并修改蒙版的高度（height），该高度决定了进度条的高度，通过 js 控制变量即可实现动态高度。
修改填充色（fill），找到需要修改的区域（如水塔），然后将颜色改为需要的颜色。

svg 代码示例：

<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M28 17.4163C28 15.4606 28 14.4828 28.3154 13.6374C28.5941 12.8904 29.0474 12.2209 29.6375 11.6847C30.3053 11.0779 31.2131 10.7147 33.0289 9.98845L53 2H67L86.9711 9.98845C88.7869 10.7147 89.6947 11.0779 90.3625 11.6847C90.9526 12.2209 91.4059 12.8904 91.6846 13.6374C92 14.4828 92 15.4606 92 17.4163V78L71.3137 98.6863C67.3535 102.646 65.3735 104.627 63.0902 105.368C61.0817 106.021 58.9183 106.021 56.9098 105.368C54.6265 104.627 52.6465 102.646 48.6863 98.6863L28 78V17.4163Z" fill="#ECECEC"/>
  <path d="M28 17.4163C28 15.4606 28 14.4828 28.3154 13.6374C28.5941 12.8904 29.0474 12.2209 29.6375 11.6847C30.3053 11.0779 31.2131 10.7147 33.0289 9.98845L53 2H67L86.9711 9.98845C88.7869 10.7147 89.6947 11.0779 90.3625 11.6847C90.9526 12.2209 91.4059 12.8904 91.6846 13.6374C92 14.4828 92 15.4606 92 17.4163V78L71.3137 98.6863C67.3535 102.646 65.3735 104.627 63.0902 105.368C61.0817 106.021 58.9183 106.021 56.9098 105.368C54.6265 104.627 52.6465 102.646 48.6863 98.6863L28 78V17.4163Z" stroke="#C7C7C7"/>
  <mask id="mask0_123_2793" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="28" y="2" width="64" height="104">
    <rect width="64" height="104" transform="matrix(1 0 0 -1 28 106)" fill="white"/>
  </mask>
  <g mask="url(#mask0_123_2793)">
    <path d="M28 17.4163C28 15.4606 28 14.4828 28.3154 13.6374C28.5941 12.8904 29.0474 12.2209 29.6375 11.6847C30.3053 11.0779 31.2131 10.7147 33.0289 9.98845L53 2H67L86.9711 9.98845C88.7869 10.7147 89.6947 11.0779 90.3625 11.6847C90.9526 12.2209 91.4059 12.8904 91.6846 13.6374C92 14.4828 92 15.4606 92 17.4163V78L71.3137 98.6863C67.3535 102.646 65.3735 104.627 63.0902 105.368C61.0817 106.021 58.9183 106.021 56.9098 105.368C54.6265 104.627 52.6465 102.646 48.6863 98.6863L28 78V17.4163Z" fill="#06CB60"/>
  </g>
</svg>

登录后复制

在这个 svg 中，可以通过修改 mask 元素中 rect 的 height 属性来控制进度条高度，并通过修改 path 元素的 fill 属性来控制进度条颜色。

以上就是如何利用 SVG 实现不规则进度条的动态效果？的详细内容，更多请关注php中文网其它相关文章！