Question

我试图在Edge和Firefox等浏览器中显示带有CSS的SVG。在Chrome浏览器中，它可以正常运行，但在其他任何浏览器中均无法正常运行。我在下面的CodePen中指出了问题。不要介意凌乱的样式（在原始版本中有不同的字体等）。

问题在于SVG在其他浏览器中根本没有显示。当我检查元素时，它确实显示了所需的代码，但是前端没有任何内容。我对SVG不太了解。

我已经尝试过：添加一个viewbox（尽管我不确定我是否正确执行了此操作）并更改了它周围的框的大小。都没有帮助。

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>

为什么我的SVG在Chrome中显示，但在其他浏览器中却没有显示？

0 个答案: