Question

我试图获得一个模式（或图像或其他路径）作为路径的笔划的“画笔”。我已经能够获得一个实际上像剪辑区域一样的路径，但这不是我想要的。 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解决方案，如果存在的话。

Answer 1

<pattern id="Pattern" x=".1" y=".1" width=".04" height=".04">

Answer 2

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

html svg模式作为路径描边的画笔

2 个答案: