首页 > 解决方案 > SVG textPath 中的文本在 iOS 浏览器中不可见

问题描述

我正在尝试在 SVG 内的弯曲路径上显示文本,该文本将很好地加载到移动浏览器上。我正在使用 SVGtextPath元素(MDN 声称它得到了广泛支持),并且我有以下简单示例:

html,body,svg { height:100% }
<svg viewBox="0 0 100 100">
  <path
    id="MyPath"
    fill="none"
    stroke="red"
    d="M10,90 Q90,90 90,45 Q90,10"
  />
  <text>
    <textPath href="#MyPath">
      Sample Text
    </textPath>
  </text>
</svg>

我的桌面浏览器很好地显示如下:

工作示例

但是在我的 iPhone 上,我只看到红线并且缺少文字。

非工作示例

我在 Safari iOS 11.3、Chrome iOS 67、Firefox iOS 12.1 中尝试过,结果都一样。

我很想弄清楚如何让弯曲的 tex 在我的 iPhone 上的浏览​​器中显示。谢谢!

标签: svgmobilecross-browsermobile-safari

解决方案


推荐阅读