SVG не отображаются на Firefox - PullRequest
Новая
       16

SVG не отображаются на Firefox

0 голосов
/ 18 апреля 2020

Я использую кучу SVG на своем сайте. Они показывают просто находка на Chrome, а на Firefox они вообще не показываются.

Я пытался найти информацию по этому вопросу, но на удивление их не так много. Все, что я нашел, говорит об определении размеров SVG, и я пытался делать это и определять размер везде, но это не работает, или я просто делаю это неправильно.

Это спрайт, которым я являюсь используя: 

<symbol id="heart"  width="24px" height="24px" viewBox="0 0 24 24">
<title>heart</title>
<path d="M12 4.435c-1.989-5.399-12-4.597-12 3.568 0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-8.118-10-8.999-12-3.568z"/>
</symbol>

Вот как я помещаю его в свой компонент: 

<svg className="room__favorite-heart room__favorite-heart--empty">
    <use xlinkHref="../sprite.svg#heart"></use>
</svg>

Это мой css: 

.room {
  &__favorite-heart {
    height: 1.5rem;
    width: 1.5rem;
    &--full {
      fill: $mainColor;
    }
    &--empty {
      fill: $greyLightest;
    }
  }
}

, а также 

.icon-testing{
  width: 24px;
  height: 24px;
}

1 Ответ

0 голосов
/ 19 апреля 2020

Я не пишу код в вашей среде, поэтому сосредотачиваюсь только на SVG, вот некоторые вещи, которые я заметил:

  1. Ваш путь должен быть внутри <g> <\g> tag

    Я знаю, что это необязательно, но, может быть, это просто то, что декодер Firefox ожидает его (просто догадывается). Так что попробуйте ...

  2. Я не вижу stroke/fill настроек в вашем SVG

    это, скорее всего, проблема. Вот SVG с такими настройками: 

    <svg width="512" height="512" viewBox="3.621934 13.621934 90.255485 62.818094" fill="none" stroke="none" stroke-width="1px" transform="matrix(1 0 0 1 0 0" >
 <g stroke="blue">
  <path id=" " stroke="magenta" d="M 10 70 a 133.591805 50 12.97728 0 0 70 -50 "/>
  <path id=" " stroke="red"     d="M10.000000 70.000000 C24.500960 70.325512 38.696601 69.272793 49.846109 67.045096 C60.995616 64.817400 70.632828 61.108261 76.897046 56.633820 C83.161264 52.159379 86.914255 46.304086 87.431414 40.198450 C87.948573 34.092813 85.301045 26.896880 80.000000 20.000000 "/>
 </g>
</svg>
...