我通过
使用具有线性渐变颜色的 SVG 形状背景: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 中用作背景图像吗?
最佳答案
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>
请注意,我使用的坐标并不完全相同。我刚刚选择的值看起来与原始结果大致相同。
关于html - 设置为背景的 SVG 线性渐变在 Edge 和 IE 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45615978/