Question

在我们的新网站设计中，我们有一个元素将标签标记放置在通过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

有问题的主题标签在页脚下方。

Firefox的SVG文本路径问题

0 个答案: