设置为背景SVG线性梯度不会在边缘和IE

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

工程工作得很好无处不在，除了边缘和1E中，形状，其中看起来是正确的，但不是渐变，只有纯色。

由于多种原因（简单使用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在边缘和IE 11？

来源

2017-08-10 Very Curious

有一些关于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>

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

来源

2017-08-11 06:03:50

设置为背景SVG线性梯度不会在边缘和IE

回答

相关问题