0

添付の例をご覧ください。それはどこでも（Androidを含む）正常に動作しますが、iOS 5.1.1（iPhone / iPadの両方）Safariでは動作します。そこでテストすると、他の場所に表示される線形グラデーションがまったく繰り返されていないことがわかります。それはiOSサファリのバグですか、それとも私の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によって確認されています（http://bugreport.apple.comのバグID＃10171198 ）

于 2012-07-14T09:21:30.540 に答える
0

@Iviggiani iPad（私のテストではSafariとChromeの両方）でlinearGradientタグのspreadMethod属性が無視されているようです。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 に答える