請看附件中的示例。 它可以在任何地方(包括Android)正常工作,但在iOS 5.1.1(包括iPhone/iPad)Safari中運行良好。 如果你在那裏測試它,你會看到線性漸變不會重複,因爲它在其他地方出現。 這是ios safari的bug還是我的svg有問題?SVG linearGradiend spreadMethod被Safari忽略(OSX和iOS)
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="150"
height="150"
id="svg5262"
onload="anim();">
<defs
id="defs5264">
<linearGradient
x1="0"
y1="0"
x2="-8"
y2="8"
id="linearGradient5260"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(0,0)"
spreadMethod="repeat">
<stop
id="stop5216"
style="stop-color:#ff0000;stop-opacity:1"
offset="0" />
<stop
id="stop5218"
style="stop-color:#7f0000;stop-opacity:1"
offset="1" />
</linearGradient>
</defs>
<script language="javascript">
var x=0;
function anim(){
var gr = document.getElementById("linearGradient5260");
gr.setAttribute("gradientTransform", "translate(" + x + ", 0)");
x++;
if (x>15) x=0;
setTimeout(anim, 50);
}
</script>
<g
id="layer1">
<path
d="M 20,140 L 20,20 140,20"
style="fill:none;stroke:black;stroke-width:12;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
d="M 20,140 L 20,20 140,20"
id="path2985"
style="fill:none;stroke:url(#linearGradient5260);stroke-width:10;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
</g>
</svg>
@Iviggiani以前有此決議?我正在嘗試使用帶有「repeat」的spreadMethod的SVG linearGradient。適用於PC,但不適用於Safari或Chrome的iPad。提前致謝。 – 2014-04-04 14:30:57
我剛剛也報告過這個bug(#16524230)。希望我能得到答覆。 – 2014-04-04 15:40:07
@Bill Doss:不幸的是,他們從來沒有給我任何反饋報告的錯誤:( – lviggiani 2014-04-07 18:09:19