Проблемы с форматом SVG в Firefox - PullRequest
       1

Проблемы с форматом SVG в Firefox

0 голосов
/ 12 сентября 2018

В нашем новом дизайне веб-сайта есть элемент, который помещает хэштеги в кривую, сгенерированную с помощью textpath 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

Хэштеги, о которых идет речь, находятся в нижнем колонтитуле.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...