html svg模式作爲畫筆從路徑中風

-1

我想獲得一個模式（或圖像或另一個路徑）作爲筆刷路徑的「筆刷」。我已經能夠獲得實際上像剪輯區域一樣的模式，但這不是我想要的。 http://jsfiddle.net/honkskillet/Yyx3b/（這是我到目前爲止，不是我想要的是什麼）
html svg模式作爲畫筆從路徑中風

<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解決方案（如果存在的話）。

來源

2013-11-01 honkskillet

一直沒能找到任何HTML的方式來做到這一點。我在這裏做了一個相對簡單的Javascript解決方案。 – honkskillet

如果你的意思是你試圖讓後面的行程的線路灰色和藍色Z字形排布，則沒有，有在SVG做到這一點不容易/自動方式。

來源

2013-11-02 13:45:41

基於我的谷歌搜索研究不幸的是，我認爲你是對的。我可能會接受你的回答，但我會將問題留待幾天，看看是否有任何意見。 – honkskillet

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

來源

2013-11-02 03:08:11

你在哪裏建議我在代碼片段的上下文中添加它？ – honkskillet

將x，y，寬度和高度值修復爲<1 –

這不會做我想要的。我想要一個模式/圖像/路徑沿路徑平鋪。就像沿着路徑的筆觸。或者遵循路徑的曲折線。 – honkskillet

html svg模式作爲畫筆從路徑中風

回答

相關問題