Почему мой SVG отображается в Chrome, а не в других браузерах? - PullRequest
Новая
       28

Почему мой SVG отображается в Chrome, а не в других браузерах?

0 голосов
/ 25 апреля 2019

Я пытаюсь показать SVG с небольшим количеством CSS в браузерах, таких как Edge и Firefox.В Chrome он работает как положено, но не в других браузерах.Я выделил проблему в CodePen ниже.Не обращайте внимания на грязный стиль (в оригинальной версии есть другой шрифт и т. Д.).

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

Я пытался: добавить viewbox (хотя я не уверен, правильно ли я это сделал) и изменить размер рамки вокруг него.Не помогло.

CodePen 

svg {
    font-size: 260px;
}

.colortext .anim-shape:nth-child(1) {
    fill: white;
}

.colortext .anim-shape:nth-child(2) {
    fill: #19b5b3;
}

section.portfolio-page {
    background-color: #252627;
    min-height: calc(100vh - 120px)
}
<section class="portfolio-page">
    <svg>
        <!-- Clippath  with text -->
        <clipPath id="cp-text">
            <text text-anchor="middle" x="50%" y="30%" dy=".38em" class="text--line">
                RT
            </text>
        </clipPath>
        <!-- Group with clippath for text-->
        <g clip-path="url(#cp-text)" class="colortext">
            <!-- Animated shapes inside text -->
            <rect width="100%" class="anim-shape"></rect>
            <rect width="23%" class="anim-shape blue-logo"></rect>
        </g>
    </svg>
</section>
...