缩放 500% 时 svg 路径移动答案

【问题标题】：svg path moving when zooming 500%缩放 500% 时 svg 路径移动
【发布时间】：2023-03-27 22:27:01
【问题描述】：

我有一个 html：

<svg class="know-me-highlight" viewBox="0 0 452 57">
            <path class="light-acqua" d="M 57 0 L 452 0 C 452 31.48023223876953 426.480224609375 57 395 57 L 0 57 C 0 25.51976776123047 25.51976776123047 0 57 0 Z">
            </path>
        </svg>

和 CSS

.know-me-highlight  {
  overflow: visible;
  position: relative;
  width: 23.54vw;
  height: 5.28vh;
  bottom: 4vh;
  z-index: 5;
}

正常缩放时一切都还不错，但是当我从 300% 缩放到 500% 时，SVG 移动到底部。我尝试在 2 个 div 中包装一个绝对位置和第二个浮动位置，但没有任何改变。这个问题似乎与 SVG 有关，但我不知道它为什么这样做。有没有人解释为什么会这样？

这是正常的样子第二张图片显示了拉伸后的样子

编辑：这是完整的 div

<div class="know-me-content">
        <div id="know-me-title">
        <div id="know_me_better">
            <span>Know me better</span>
        </div>
        <svg class="know-me-highlight" width="100px" height="200px" viewBox="0 0 452 57">
            <path class="light-acqua" d="M 57 0 L 452 0 C 452 31.48023223876953 426.480224609375 57 395 57 L 0 57 C 0 25.51976776123047 25.51976776123047 0 57 0 Z">
            </path>
        </svg>
    </div>

这是相对的css：

.know-me-content {
  position: relative;
  float: right;
  left: 10vw;
  bottom: 41.2vh;
  width: 50vw;
  overflow: visible;
}

.light-acqua {
  fill: rgba(167, 219, 216, 1);
}

#know_me_better {
  position: relative;
  overflow: hidden;
  width: 28vw;
  height: 6.49vh;
  line-height: 9.26vh;
  margin-top: -1.85vh;
  text-align: left;
  font-style: normal;
  font-weight: bold;
  font-size: 5.56vh;
  color: rgba(0, 0, 0, 1);
  z-index: 101;
}

.know-me-highlight  {
  overflow: visible;
  position: relative;
  width: 23.54vw;
  height: 5.28vh;
  bottom: 4vh;
  right: 3vw;
  z-index: 5;
}

【问题讨论】：

请提供一个完整的例子（包括HTML等文本）

标签： html css svg

【解决方案1】：

解决问题的一个简单方法是在 svg 中使用 <text> 元素，如下所示：

<div class="know-me-content">
        <svg class="know-me-highlight" viewBox="0 0 452 57">
            <path fill="rgba(167, 219, 216, 1)" class="light-acqua" d="M 57 0 L 452 0 C 452 31.48023223876953 426.480224609375 57 395 57 L 0 57 C 0 25.51976776123047 25.51976776123047 0 57 0 Z">
            </path>
          <text x="226" y="45" text-anchor="middle" font-size="55">Know me better</text>
        </svg>
    </div>

在这种情况下，svg 元素没有宽度或高度，并采用所有可分配的宽度，即父 div 的宽度。

【讨论】：