如何为SVG矩形动画以从下到上填充？

debugcn 发表于 Dev

胡斯纳

我在这里使用SVG，我想尝试使用transform="rotate(-90)"的是从下到上的蓝色填充，但是问题是文本也会旋转。我是SVG的新手，任何人都可以向我建议如何实现此输出。任何帮助将不胜感激！

svg {
  width: 200px;
}

rect {
  transition: height 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="slider1" type="range" min="0" max="100" step="25" value="25" oninput="document.querySelector(`#SVG${this.id} rect`).setAttribute('height',this.value+'%')" />

<svg id="SVGslider1" viewBox="0 0 28 6">
  <rect width="100%" height="25%" fill="blue" />
  <rect width="100%" height="100%" fill="none" stroke="black"/>
  <text x="5" y="5"  font-size="6" fill="green">text here</text>
</svg>

柯尔

最简单的答案是将CSS更新rect {transform: transform: rotate(180deg); transform-origin: center center;}为将其旋转180º，固定到SVG中心。

另外，也可以使用覆盖在蓝色上的白色矩形重建SVG，并使用javascript滑块将白色矩形作为目标。

svg {
  width: 200px;
}

rect {
  transform: rotate(180deg);
  transform-origin: center center;
  transition: height 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="slider1" type="range" min="0" max="100" step="25" value="25" oninput="document.querySelector(`#SVG${this.id} rect`).setAttribute('height',this.value+'%')" />

<svg id="SVGslider1" viewBox="0 0 28 6">
  <rect width="100%" height="25%" fill="blue" />
  <rect width="100%" height="100%" fill="none" stroke="black"/>
  <text x="5" y="5"  font-size="6" fill="green">text here</text>
</svg>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。