设置为背景的 SVG 线性渐变在 Edge 和 IE 中不起作用答案

【问题标题】：SVG linear gradient set as background doesn't work in Edge and IE设置为背景的 SVG 线性渐变在 Edge 和 IE 中不起作用
【发布时间】：2018-01-18 20:04:56
【问题描述】：

我通过

使用带有线性渐变颜色的 SVG 形状

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

在任何地方都可以正常工作，除了 Edge 和 IE，形状正确显示，但不是渐变，只有纯色。

出于多种原因（简单使用 png 后备）我想使用这种实现方式。我没有发现关于 Edge 的这种用法没有任何限制。

这是 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>

知道如何使带有线性背景的 SVG 在 Edge 和 IE 11 中用作背景图像吗？

【问题讨论】：

标签： html css internet-explorer svg microsoft-edge

【解决方案1】：

IE 不喜欢该 SVG。我想这可能是奇怪的gradientTransform。

https://jsfiddle.net/efgtu2pj/

如果你去掉它并更新梯度坐标来补偿，它渲染得很好。

<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>

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

【讨论】：

【解决方案2】：

这是一个带有渐变的 SVG 示例，我从 illustrator 中导出，然后编辑 SVG 代码以删除 gradientTransform，并替换 x1、y1、x2、y2 值，使其适用于 Internet Explorer 和 Edge：

Illustrator 导出：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="40px" height="150px" viewBox="0 0 40 150" enable-background="new 0 0 40 150" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-1023.5181" y1="4587.5352" x2="-1023.2139" y2="4587.5352" gradientTransform="matrix(0 492.7101 -492.7101 0 2260344.5 504297.75)">
    <stop  offset="0" style="stop-color:#FFCC07"/>
    <stop  offset="0.5111" style="stop-color:#346966"/>
    <stop  offset="1" style="stop-color:#51538C"/>
</linearGradient>
<rect fill="url(#SVGID_1_)" width="40" height="150"/>
<path fill="#FFFFFF" d="M20.81,143.313c0.349-0.071,0.677-0.258,0.907-0.564l10.981-14.513c0.504-0.667,0.371-1.625-0.296-2.13
    c-0.666-0.504-1.625-0.372-2.13,0.295l-8.354,11.042v-31.681c0-0.835-0.684-1.52-1.521-1.52c-0.835,0-1.52,0.685-1.52,1.52v32.117
    L9.674,127.03c-0.541-0.638-1.506-0.717-2.144-0.176c-0.638,0.541-0.716,1.505-0.176,2.143l11.773,13.878
    C19.551,143.373,20.229,143.525,20.81,143.313"/>
</svg>

我编辑的代码：

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="40px" height="150px" viewBox="0 0 40 150">
<style type="text/css">
    .st0{fill:url(#s);}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="40" y2="150" >
    <stop  offset="0" style="stop-color:#FFCC07"/>
    <stop  offset="0.5111" style="stop-color:#346966"/>
    <stop  offset="1" style="stop-color:#51538C"/>
</linearGradient>
<rect fill="url(#SVGID_1_)" width="40" height="150"/>
<path fill="#FFFFFF" d="M20.811,143.313c0.349-0.07,0.676-0.258,0.906-0.563l10.981-14.513c0.504-0.668,0.37-1.625-0.296-2.131
    c-0.666-0.504-1.625-0.371-2.131,0.295l-8.354,11.043v-31.682c0-0.835-0.684-1.52-1.521-1.52c-0.835,0-1.52,0.685-1.52,1.52v32.117
    L9.674,127.03c-0.541-0.638-1.506-0.718-2.144-0.177c-0.638,0.541-0.716,1.506-0.176,2.144l11.773,13.878
    C19.551,143.373,20.229,143.525,20.811,143.313"/>
</svg>

这张图片显示了不同之处： file diff screenshot

【讨论】：