如何為 SVG 矩形設置動畫以從下到上填充？

Question

我正在研究 SVG 在這里我想要從下到上填充藍色我曾嘗試使用transform="rotate(-90)"但問題是文本也會旋轉。 我是 SVG 的新手，誰能向我建議如何實現這個 output。 任何幫助將不勝感激！

 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>

Answer 1

您可以為height設置動畫，而不是為width設置動畫，並使其從下到上填充，您可以圍繞其中心向上旋轉rect ：

 svg { width: 200px; } rect { transition: height 0.5s; transform-origin: center center; }

 <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" transform="rotate(180)" /> <rect width="100%" height="100%" fill="none" stroke="black"/> <text x="5" y="5" font-size="6" fill="green">text here</text> </svg>

Answer 2

最短的答案是用rect {transform: transform: rotate(180deg); transform-origin: center center;}更新您的 CSS rect {transform: transform: rotate(180deg); transform-origin: center center;}將其旋轉 180º，固定到 SVG 中心。

或者，重建 SVG，白色矩形覆蓋在藍色上，slider 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>