0

请查看随附的示例。它在任何地方（包括 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>
4

2 回答 2

0

这是一个错误。Apple 已向我确认（错误 ID #10171198，位于http://bugreport.apple.com）

于 2012-07-14T09:21:30.540 回答
0

@Iviggiani 似乎在 iPad 上忽略了 linearGradient 标签的 spreadMethod 属性（在我的测试中包括 Safari 和 Chrome）。使用 SVG linearGreadient 和 pattern 标签，我能够创建与仅使用 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-08T00:36:01.777 回答