css - 在桌面上使用 CSS 将 svg 文本路径居中时遇到问题

Question

我看过其他 svg 文本问题，但我无法理解我做错了什么。我正在现场工作 https://sourdoughstory.com/product/mushroom/ 并使用代码

<svg class="svg-width desktop" style="margin:auto">
    <path id="curve-individual-desktop" d="M 50 170 q 185 -70 400 0" />
    <text>
        <textPath xlink:href="#curve-individual-desktop" class="color-text" startOffset="50%" text-anchor="middle">
        Thoughtfully Sourced
        </textPath>
    </text>
</svg>

我可以在移动设备上将它居中，但在 1000 像素和 1350 像素的屏幕尺寸之间它是倾斜的，我似乎无法弄清楚如何将它居中。

Answer 1

您需要设置viewBox 属性并添加一些CSS。 尝试使用这些值来获得所需的输出:

svg {
  display: block;
  width: 70%;
  margin: 0 auto;
}

<svg class="svg-width desktop" viewBox="50 100 400 70">
  <path id="curve-individual-desktop" d="M 50 170 q 185 -70 400 0" />
  <text>
    <textPath xlink:href="#curve-individual-desktop" class="color-text" startOffset="50%" text-anchor="middle">
    Thoughtfully Sourced
    </textPath>
  </text>
</svg>