使用clip-path裁剪的SVG在Chrome缩放时高度变化如何固定？

问题原因 #

异常由两点导致：

1. clip-path和transform使用了CSS绝对像素单位，该单位相对浏览器视口生效，页面缩放时像素比例变化，无法和SVG内部viewBox的坐标体系匹配，导致裁剪、偏移位置错位。
2. SVG外层容器.liquid仅设置了固定宽度，未设置固定高度，SVG会按viewBox比例自适应，窗口缩放时可能出现高度偏移。

解决方案 #

修改对应CSS即可，改动量极小：

• 将clip-path的固定像素值替换为相对于SVG总高度的百分比：SVG总高度为391.5，需裁剪的y=200位置换算后约为51.09%
• 将transform: translateY的固定像素值也替换为同比例百分比
• 给.liquid添加固定高度，匹配按viewBox比例计算出的SVG高度，避免尺寸变化

修改后的完整代码如下：

CSS代码

body {
  background: #efe944;
}

.container {
  display: flex;
  justify-content: center;
}

.liquid {
  display: block;
  width: 218px;
  /* 新增固定高度，按viewBox比例计算：218 * 391.5 / 291.5 ≈ 293px */
  height: 293px;
  margin-left: 18px;
}

.upper-part {
  transform: translateY(51.09%);
}

.lower-part {
  clip-path: polygon(0 51.09%, 100% 51.09%, 100% 100%, 0% 100%);
}

HTML代码

<div class="container">
  <div class="container1">
    <div class="liquid">
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291.5 391.5">
              <title>Liquid_Bk500</title>
              <path
                class='lower-part'
                d="M290.77,20.81v350c0,11.05-64.92,20-145,20s-145-8.95-145-20v-350c0,11.05,64.92,20,145,20S290.77,31.86,290.77,20.81Z"
                style="
                  fill: red;
                  stroke: #fff;
                  stroke-miterlimit: 10;
                  opacity: 0.7000000000000001;
                "
              />
              <ellipse
                class='upper-part'
                cx="145.77"
                cy="20.81"
                rx="145"
                ry="20"
                style="
                  fill: red;
                  stroke: #fff;
                  stroke-miterlimit: 10;
                  opacity: 0.8;
                "
              />
            </svg>
    </div>
  </div>
</div>

修改后无论浏览器页面缩放比例、窗口尺寸如何调整，SVG的高度、裁剪位置、偏移效果都会保持和100%缩放时的正常效果一致。

内容的提问来源于stack exchange，提问作者user16774982