Question

在我的HTML中是SVG符号和渐变：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29" style="width: 0; height: 0;">
    <linearGradient id="background" gradientUnits="userSpaceOnUse" x1="508.07" y1="555.048" x2="537.07" y2="555.048" gradientTransform="rotate(90 538.898 30.74)">
        <stop offset="0" stop-color="#f1f2f2"/>
        <stop offset="1" stop-color="#e0e0e0"/>
    </linearGradient>

    <linearGradient id="arrow_bg" gradientUnits="userSpaceOnUse" x1="14.22" y1="2.611" x2="14.22" y2="27.425">
        <stop offset="0" stop-color="#faa61a"/>
        <stop offset="1" stop-color="#f37021"/>
    </linearGradient>

    <linearGradient id="arrow_bg--hover" gradientUnits="userSpaceOnUse" x1="14.59" y1="2.611" x2="14.59" y2="27.425">
        <stop offset="0" stop-color="#f26522"/>
        <stop offset="1" stop-color="#bb191a"/>
    </linearGradient>


    <symbol id="left_arrow" viewBox="0 0 29 29">
        <path fill="url(#background)" d="M2.726 28.913A2.636 2.636 0 0 1 .09 26.277V2.549A2.636 2.636 0 0 1 2.726-.087h23.727a2.636 2.636 0 0 1 2.636 2.636v23.727a2.636 2.636 0 0 1-2.636 2.636H2.726z"/>
        <path d="M19.548 27.349a2.307 2.307 0 0 1-1.688-.733L7.946 15.987a2.308 2.308 0 0 1 0-3.147L17.86 2.21a2.308 2.308 0 0 1 3.374 3.147l-8.447 9.055 8.447 9.055a2.308 2.308 0 0 1-1.686 3.882z"/>
    </symbol>
    <symbol id="right_arrow" viewBox="0 0 29 29">
        <path fill="url(#background)" d="M26.083 29.155a2.636 2.636 0 0 0 2.636-2.636V2.792A2.636 2.636 0 0 0 26.083.156H2.356A2.636 2.636 0 0 0-.28 2.792v23.727a2.636 2.636 0 0 0 2.636 2.636h23.727z"/>
        <path d="M9.262 27.591c.617 0 1.233-.247 1.688-.733l9.915-10.629a2.308 2.308 0 0 0 0-3.147L10.949 2.453a2.308 2.308 0 0 0-3.261-.114A2.308 2.308 0 0 0 7.575 5.6l8.447 9.055-8.447 9.055a2.308 2.308 0 0 0 1.687 3.881z"/>
    </symbol>
</svg>

<svg>
    <use xlink:href="#left_arrow" class="left_arrow"/>
</svg>
<svg>
    <use xlink:href="#right_arrow" class="right_arrow"/>
</svg>

和CSS：

.left_arrow,
.right_arrow {
    fill: url(#arrow_bg);
}
.left_arrow:hover,
.right_arrow:hover {
    fill: url(#arrow_bg--hover);
}

问题是在Chrome中一切看起来都不错，但在Firefox中，箭头的背景不适用。我试验并认为当我将样式放入HTML页面而不是外部CSS文件时，一切都很好。谁能说出为什么会这样？

使用CSS的SVG过滤器

0 个答案: