时间戳

首页 > 解决方案 > Firefox 的 SVG 文本路径问题

html - Firefox 的 SVG 文本路径问题

问题描述

我们的新网站设计中有一个元素，将主题标签放置在通过 svg 的文本路径生成的曲线上。

下面手动编写的开发代码可以在我们的测试浏览器（Firefox、Chrome、Edge）上完美运行。

<div class="hashtags2 xp">
<svg viewbox="0 0 100 25">
<path fill="transparent" id="curve" d="M0 30 V12 Q30 17 55 12 T100 11 V30" />
<text>
<textpath text-anchor="middle" startoffset="50%" xlink:href="#curve">#PedalersKnowsBhutan &nbsp; #BicycleBhutan &nbsp; #ExperienceBhutan &nbsp; #HikeBhutan &nbsp; #DiscoverWithPedalers</textpath>
</text>
</svg>
</div>

但是当我们将设计转换为模板并通过我们的 CMS (MODX) 构建过程运行它时，在 Firefox 中查看时，下面的缩小版本不再显示文本（Chrome 和 Edge 仍然完美显示）。

<div class="hashtags2 xp"><svg viewbox="0 0 100 25"><path fill="transparent" id="curve" d="M0 30 V12 Q30 17 55 12 T100 11 V30" /><text><textpath text-anchor="middle" startoffset="50%" xlink:href="#curve">#PedalersKnowsBhutan &nbsp; #BicycleBhutan &nbsp; #ExperienceBhutan &nbsp; #HikeBhutan &nbsp; #DiscoverWithPedalers</textpath></text></svg></div>

两个版本之间的唯一区别是缺少换行符。

请求的 CSS。

.hashtags2 {
  z-index: 15;
  font-size: 0.15vw;
  position: absolute;
  bottom: -34rem;
  left: 0;
  fill: #fff;
  width: 100%;
}

.xp { display: block; }

有没有办法避免 Firefox 的这种怪癖？

开发页面，在 Firefox、Chrome、Edge 和 Opera 中正确显示： https ://pedalers.travel/sandbox/tours-v2018.7.4.4.htm

CMS 构建的页面，在 Chrome、Edge 和 Opera 中正确显示，但在 Firefox 中不正确 https://pedalers.travel/sandbox/test-page.htm

有问题的主题标签位于页脚。

标签： htmlsvg

解决方案

推荐阅读