如何分別從兩個元素開始svg模式以及如何設置正確的座標系？

我有兩條粗線，我想爲這條線應用圖案。線條應具有相同的圖案，但繪製圖案的開始應分別從每條線的（0，0）開始。在我的實驗http://jsfiddle.net/69t09wey/模式適用於像面膜。 I.e模式適用於整個svg畫布作爲不可見的圖層，並且其中線條可見，圖案也可見。如何分別從兩個元素開始svg模式以及如何設置正確的座標系？

<svg viewBox="0 0 1000 1000" 
    xmlns="http://www.w3.org/2000/svg" version="1.1"> 

    <pattern id="pattern-1" width="20" height="20" x="0" y="0" patternUnits = "userSpaceOnUse" > 
     <path d="M 0 0 L 20 20" fill="none" stroke="#0000ff" stroke-width="1"></path> 
    </pattern> 

<g transform="scale(5)"> 
    <rect x="1" y="1" width="1000" height="1000" 
     fill="none" stroke="blue" /> 

    <path d="M 1 9 L 200 9" 
     fill="red" stroke="url(#pattern-1)" stroke-width="20" /> 

    <path d="M 1 53 L 200 53" 
     fill="red" stroke="url(#pattern-1)" stroke-width="20" /> 
    </g> 
</svg>

來源

2015-07-20 Raf

可能是更容易使用'<矩形X = 「1」 Y = 「1」寬度= 「200」 HEIGHT = 「20」填充=「URL（＃圖案-1）「/>'而不是粗線。 –

如果你讓你的線條相同。然後通過應用變換移動第二個。這將改變圖案的座標空間。

<svg viewBox="0 0 1000 1000" 
 
    xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 

 
    <pattern id="pattern-1" width="20" height="20" x="0" y="0" patternUnits = "userSpaceOnUse" > 
 
     <path d="M 0 0 L 20 20" fill="none" stroke="#0000ff" stroke-width="1"></path> 
 
    </pattern> 
 

 
<g transform="scale(5)"> 
 
    <rect x="1" y="1" width="1000" height="1000" 
 
     fill="none" stroke="none" /> 
 

 
    <path d="M 1 9 L 200 9" 
 
     fill="red" stroke="url(#pattern-1)" stroke-width="20" /> 
 

 
    <path d="M 1 9 L 200 9" transform="translate(0,44)" 
 
     fill="red" stroke="url(#pattern-1)" stroke-width="20" /> 
 
    </g> 
 
</svg>

來源

2015-07-20 12:08:43

和模式適用於整個svg畫布不分別爲每行https://i.imgur.com/Rxtq7j9.png – Raf

這些毛刺是因爲你的線是20像素寬，但你在Y = 9畫線。所以模式的角落是可見的。這個小故障對頂線來說並不明顯，因爲它（小故障）不在SVG的頂部。如果你將你的Y座標從9改爲10，它會呈現很好的效果。 –

如何分別從兩個元素開始svg模式以及如何設置正確的座標系？

回答

相關問題