SVG linearGradiend spreadMethod被Safari忽略（OSX和iOS）

請看附件中的示例。它可以在任何地方（包括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>

來源

2012-07-11 lviggiani

這是一個錯誤。它已經被Apple確認（bug id＃10171198在http://bugreport.apple.com）

來源

2012-07-14 09:21:30 lviggiani

@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

@Iviggiani似乎在iPad上（我的測試中Safari和Chrome都忽略了linearGradient標記的spreadMethod屬性）。同時使用SVG linearGinterient和模式標籤，我可以創建與僅使用linearGradient標籤相同的效果，同時可以在Windows計算機和iPad上使用。我從這個網站https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns

這裏的想法是什麼，我做了一個例子（這裏的jsfiddle：http://jsfiddle.net/wahoodoss/eG5Tx/）：

<!DOCTYPE html> 
<html> 
<body> 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    <svg id="abc" width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
     <defs> 
      <linearGradient id="Gradient1"> 
       x1="0%" y1="0%" x2="0%" y2="100%" 
       <stop offset="40%" stop-color="white" stop-opacity="1"/> 
       <stop offset="100%" stop-color="#00AA00" stop-opacity="1"/> 
      </linearGradient> 

      <pattern id="Pattern" x="0" y="0" width="5" height="5" 
       patternTransform="rotate(90 0 0)" patternUnits="userSpaceOnUse"> 
       <rect x="0" y="0" width="5" height="5" fill="url(#Gradient1)"/> 
      </pattern> 

     </defs> 
    </svg> 

    <script> 
     var arc = d3.svg.arc() 
      .innerRadius(40).outerRadius(100) 
      .startAngle(20 * 3.141/180) 
      .endAngle(120 * 3.141/180); 

     var chart = d3.select("#abc") 
      .attr("class", "chart") 
      .attr("width", 420) 
      .attr("height", 420); 

     chart.append("svg:rect") 
      .style("fill","url(#Pattern)") 
      .style("stroke", "black") 
      .attr("x", 20).attr("y",20).attr("width",120).attr("height",120); 

    </script> 
</body> 
    </html>

來源

2014-04-08 00:36:01

SVG linearGradiend spreadMethod被Safari忽略（OSX和iOS）

回答

相關問題