在不改变宽度或使其倾斜/拉伸的情况下更改 SVG 高度 [英] Change SVG Height without changing width or making it skew/stretch

问题描述

我想要一个装有液体的圆柱形容器，而这种液体会改变容器中的颜色和数量，因此我为此使用了 SVG(SVG 用于表示圆柱形容器中的液体).

这是SVG的源代码

function changeCol(col) {document.querySelector('path').style.setProperty('fill', col, '!important');document.querySelector('ellipse').style.setProperty('fill', col, '!important');//它不起作用我不知道为什么.}函数 changeHeight(vol) {//一些代码来改变它的高度.}

.container {宽度:适合内容；边框:纯红色；}.液体 {宽度:200px；}.liquid SVG * {填充:红色！重要；}

<div class="liquid"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.66 325.25"><title>liquid_RBt</title><path d="M216.66,28V297.25c0,15.47-48.5,28-108.33,28S0,312.72,0,297.25V28C0,43.46,48.5,56,108.33,23.66"fill,26.46"样式#fff;stroke:#fff;stroke-miterlimit:10;opacity:0.7000000000000001"/><ellipse cx="108.33" cy="28" rx="108.33" ry="28" style="fill:#fff;stroke:#fff;stroke-miterlimit:10;opacity:0.8"/></svg>

<div class="控制器"><div class="颜色变化"><button class="col-btn" onclick="changeCol('red');">Red</button><button class="col-btn" onclick="changeCol('blue');">Blue</button><button class="col-btn" onclick="changeCol('green');">green</button>

<div class="change-amount"><input type="number" id="amountInp" onchange='changeHeight(this.value)' placeholder="(in ml)">

解决方案

我已经用 clipPath 裁剪了路径，然后我移动了它以隐藏需要消失的多边形部分.

我也不知道圆柱体的体积，所以您可能想要缩放数字.

我还修复了颜色.

function changeCol(col) {document.querySelector('path').style.setProperty('fill', col);document.querySelector('ellipse').style.setProperty('fill', col);}函数 changeHeight(vol) {//不确定应该装多少 100 毫升document.querySelector('ellipse').cy.baseVal.value = 300 - vol;document.querySelector('rect').y.baseVal.value = 300-vol;}

.container {宽度:适合内容；边框:纯红色；}.液体 {宽度:200px；}

<div class="liquid"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.66 325.25"><title>liquid_RBt</title><定义><clipPath id="cp"><rect x="0" y="0" width="230" height="400"/></clipPath></defs><path d="M216.66,28V297.25c0,15.47-48.5,28-108.33,28S0,312.72,0,297.25V28C0,43.46,48.5,56,108.33,23.66"fill,26.46"样式红色；中风:#fff；中风斜接限制:10；不透明度:0.7000000000000001；剪辑路径:url(#cp)"/><ellipse cx="108.33" cy="28" rx="108.33" ry="28" style="fill:red;stroke:#fff;stroke-miterlimit:10"/></svg>

<div class="控制器"><div class="颜色变化"><button class="col-btn" onclick="changeCol('red');">Red</button><button class="col-btn" onclick="changeCol('blue');">Blue</button><button class="col-btn" onclick="changeCol('green');">green</button>

<div class="change-amount"><input type="number" id="amountInp" onchange='changeHeight(this.value)' placeholder="(in ml)">