-1

我正在尝试获取一个图案（或图像或其他路径）来充当描边路径的“画笔”。我已经能够获得一条路径，实际上就像一个模式的剪切区域一样，但这不是我想要的。 http://jsfiddle.net/honkskillet/Yyx3b/（这是我到目前为止所拥有的，不是我想要的）

    <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512 512">
  <defs>
      <pattern id="Pattern" x="0" y="0" width="10" height="10">
          <rect fill="gray"  x="0" y="0" width="100" height="100"/>
          <path id="testPath" d = "M 000 00 L 50 100 L 100 0"  stroke-width = "5" stroke="black" fill="blue"  />
    </pattern> 

  </defs>

    <path d = "M 200 50 L 300 150 L 200 150 L 200 50"  stroke-width = "20" stroke="url(#Pattern)" fill="red">
    </path>

     <rect fill="url(#Pattern)" stroke="black"  x="0" y="0" width="100" height="100"/>

</svg>

我希望图案（或图像或其他路径）沿路径方向定向和平铺。我在 javascript http://codepen.io/honkskillet/pen/AIEpF（路径上的路径）中找到了一种复杂的方法，但我想知道是否有一种纯 svg html 的方式来实现这一点。干杯

编辑

在路径 HTML 上绘制路径的非 html 唯一解决方案

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512 512">

      <path id="testpath" d = "M 50 400 Q 150 150  50 150  T150 400"  stroke-width = "10" stroke="blue" fill="none" >
    </path>

</svg>

Javascript

var a = document.getElementById("testpath"),
    len = a.getTotalLength(),
    steps=20,
    p, p1, dp, pa, pb,
    circle;

for(var i =0; i<steps;i++){
    p =   a.getPointAtLength(len*i/steps);
    p1 =   a.getPointAtLength(len*(i+1)/steps);
    dp={x: p.x-p1.x, y:p.y-p1.y};
    pa= {x: (0.67*p.x+0.33*p1.x)-dp.y,  y:(0.67*p.y+0.33*p1.y)+dp.x};
    pb= {x: (0.33*p.x+0.67*p1.x)+dp.y, y:(0.33*p.y+0.67*p1.y)-dp.x};
    circle = document.createElementNS("http://www.w3.org/2000/svg", "path");
    circle.setAttributeNS(null,"d", "M"+p.x+","+p.y+" C"+pa.x+","+pa.y+" "+pb.x+","+pb.y+" "+p1.x+","+p1.y);
    //circle.setAttributeNS(null,"d", "M"+p.x+","+p.y+" L"+pa.x+","+pa.y+" L"+pb.x+","+pb.y+" L"+p1.x+","+p1.y);
    circle.setAttribute("stroke-linecap","round");
    circle.setAttribute("stroke-width", "8");
    circle.setAttribute("stroke", "#336699");
    circle.setAttribute("fill", "none");

    document.getElementById("mySVG").appendChild(circle);

}

这将沿着一条路径绘制一条罪曲线。

如果存在的话，我仍然想要一个仅 SVG HTML 的解决方案。

4

2 回答 2

1

如果你的意思是你试图得到一个沿着笔划线的灰色和蓝色之字形图案，那么不，在 SVG 中没有简单/自动的方法来做到这一点。

于 2013-11-02T13:45:41.287 回答
0 
<pattern id="Pattern" x=".1" y=".1" width=".04" height=".04">
于 2013-11-02T03:08:11.693 回答