Css SVG文本在移动浏览器上增长并溢出

发布于12月16日

我有一个显示弯曲文本的基本SVG元素.虽然我使用的是网络安全字体和相对的样式单位，但在移动浏览器上，文本不知何故会变大并溢出.我在台式机和安卓系统上都使用Chrome120.我try 了其他字体，MS Edge，在根元素上设置1rem/16px字体大小，它们没有帮助.为什么会发生这种事呢？我怎么才能修好它呢？

Desktop	Mobile

下面是我用来测试的页面:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480">
    <defs>
      <style>
        @import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@700&display=swap');
      </style>
      <path id="yz" d="M61.92190299775521,240 A178.0780970022448,178.0780970022448 0 0 1 418.0780970022448,240"></path>
    </defs>
    <rect width="100%" height="100%" fill="white" />
    <text style="font-family: 'PT Serif', serif; font-size: 6.9ex; white-space: pre; letter-spacing: -0.05ex;">
      <textPath href="#yz"> LOREM  IPSUM  DOLOR</textPath>
    </text>
  </svg>

以下是该页面的实时版本: https://gold-gertie-8.tiiny.site/个

Css SVG文本在移动浏览器上增长并溢出

推荐答案

Css相关问答推荐

如何使用css：：Part()定位Web组件shadowDOM中的第N个元素

如何使重复线性渐变适合字体大小？

可折叠/可展开的数据表行：如何使Shadcn数据表中的可折叠内容全宽？

带高度的容器查询不工作，但可随宽度调整

将CSS栅格行高设置为其余视口高度

如何使按钮：之后像按钮：之前一样可见

Bootstrap 和 Sass：将 SCSS 文件转换为 CSS 时出错.错误：$theme-colors-rgb 中未定义变量 @each $color、$value

设置初始大小并记住分配的最后大小

如果父项的不透明度小于 1，则背景过滤器不适用

Blazor 组件未链接 css

使用 React-Router 和 Outlet 时如何确保内容保持在下方

CSS3 - RotateY() 居中

控制表格单元格之间的间距

Angular Material 中的样式垫 Select

如何更改 CSS：JavaScript 中的根 colored颜色变量

使用自定义 CSS 在 WebView 中呈现 HTML

通过 Bootstrap4 对列进行排序

bootstrap.css 和 bootstrap-theme.css 有什么区别？

仅针对使用的类优化 Font Awesome

CSS中伪元素前的&是什么意思？