SVG线性渐变设置为背景在Edge和IE中不起作用 [英] SVG linear gradient set as background doesn't work in Edge and IE

问题描述

我正在通过

background: url(#{$imgUrlBase}/element.svg);

除了Edge和IE之外，其他所有地方都可以正常工作，除了形状正确显示的Edge和IE之外，只有渐变色，而不是渐变色.

Works just fine everywhere, except for Edge and IE, where the shape appears correctly, but instead of gradient, there is only solid color.

出于多种原因(简单地使用png后备)，我想使用这种实现方式.我没有发现有关Edge的这种用法的任何限制.

For multiple reasons (simple use of png fallback) I would like to use this way of implementation. I did not find any not of limitation of this usage regarding Edge.

这是element.svg

This is element.svg

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="l" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 308 308" style="enable-background:new 0 0 308 308;" xml:space="preserve">
<style type="text/css">
    .st0{fill:url(#s);}
</style>
<g id="Page-1">
    <defs>
        <linearGradient id="s" gradientUnits="userSpaceOnUse" x1="-483.7941" y1="514.2445" x2="-484.1468" y2="514.5996" gradientTransform="matrix(620 0 0 -620 300215 319095)">
            <stop offset="0" style="stop-color:#FF0000"/>
            <stop offset="1" style="stop-color:#00FF00"/>
        </linearGradient>
    </defs>
    <path id="shape" class="st0" d="..."/>
</g>
</svg>

是否知道如何在Edge和IE 11中将具有线性背景的SVG用作背景图像?

推荐答案

关于SVG的某些内容是IE所不喜欢的.我认为其中可能是奇怪的gradientTransform.

There is something about that SVG that IE doesn't like. I think it may be the odd gradientTransform that's in there.

https://jsfiddle.net/efgtu2pj/

如果您摆脱了它，并更新了渐变坐标以进行补偿，则效果会很好.

If you get rid of it and update the gradient coordinates to compensate, it renders fine.

<svg version="1.1" id="l" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 308 308">
<style type="text/css">
    .st0{fill:url(#s);}
</style>
<g id="Page-1">
    <defs>
        <linearGradient id="s" gradientUnits="userSpaceOnUse" x1="308" y1="308" x2="-50" y2="0">
            <stop offset="0" style="stop-color:#FF0000"/>
            <stop offset="1" style="stop-color:#00FF00"/>
        </linearGradient>
    </defs>
    <path id="shape" class="st0" d="M154,0,308,308,0,308"/>
</g>
</svg>

请注意，我使用的坐标并不完全相等.我刚刚选择的值看起来与原始结果大致相同.

这篇关于SVG线性渐变设置为背景在Edge和IE中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！