Question

请看附带的例子。它适用于所有地方（包括Android），但在iOS 5.1.1（包括iPhone / iPad）Safari。如果你在那里进行测试，你会看到线性渐变根本没有重复，因为它出现在其他地方。这是ios safari的错误还是我的svg有什么问题？

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

Answer 1

这是一个错误。 Apple已经向我确认了这个问题（http://bugreport.apple.com的错误ID＃10171198）

Answer 2

@Iviggiani似乎在iPad上忽略了linearGradient标签的spreadMethod属性（在我的测试中，Safari和Chrome都被忽略）。使用SVG linearGreadient和模式标签，我能够创建与使用linearGradient标签相同的效果，并且它可以在Windows机器和iPad上运行。我从这个网站https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns

得到了这个想法

以下是我所做的一个例子（jsFiddle here：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>

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

2 个答案: