2017-03-15 88 views
0

我能夠將兩個單獨的路徑合併到一起using this technique。不過,我的動畫仍然將它視爲兩條獨立的路徑。如何將兩個SVG路徑組合在一起(不含空格)

有沒有方法來結合這兩條路徑而不使用空格?

M3322.09,361.23V473.45c0,14,2,23.41,23.41,23.41H3809.63 
M3809.63,496.31c21.41,0,166.41-1,166.41-1s13.07.87,82.08.87c31.75,0,63.51-36.21,95.26-75.31"/> 

svg { 
 
    fill: none; 
 
} 
 

 
path { 
 
    stroke: tomato; 
 
    stroke-width: 100; 
 
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 25 14905 623"> 
 
<path d="M3322.09,361.23V473.45c0,14,2,23.41,23.41,23.41H3809.63 M3809.63,496.31c21.41,0,166.41-1,166.41-1s13.07.87,82.08.87c31.75,0,63.51-36.21,95.26-75.31"/> 
 
</svg>

原本獨立的路徑可以查看這裏:

svg { 
 
    fill: none; 
 
} 
 

 
path { 
 
    stroke: tomato; 
 
    stroke-width: 100; 
 
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 25 14905 623"> 
 
<path d="M3322.09,361.23V473.45c0,14,2,23.41,23.41,23.41H3511.9" /> 
 
<path d="M3809.63,496.31c21.41,0,166.41-1,166.41-1s13.07.87,82.08.87c31.75,0,63.51-36.21,95.26-75.31" /> 
 
</svg>

我們的目標是要合併這些路徑匹配上面的svg片段 - 不使用路徑中的空格。

回答

2

答案是

M3322.09,361.23V473.45c0,14,2,23.41,23.41,23.41H3809.63 c21.41,0,166.41-1,166.41-1s13.07.87,82.08.87c31.75,0,63.51-36.21,95.26-75.31

H3511.9指在3511.9繪製一條水平線直到X點(與任何y爲先前繼承)

M3809.63,496.31裝置移動 「光標」 於x ,y座標。

我將H3511.9更改爲H3809.63並刪除了M3809.63,496.31並繼續使用c21.41...這是一條繪製曲線命令。

這些資源幫助我瞭解dpath屬性的繪圖命令。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

https://www.youtube.com/watch?v=k6TWzfLGAKo

1

對於那些誰進來就這個問題研究的同時,使從合併路徑,好像我是肯定不會有什麼問題,問題就在這裏只是一個錯字。

在上面的合併片段中,第一個路徑的結尾已從其原始23.41H3511.9更改爲23.41H3809.63

通過放置一個空格(或者根本沒有空格,只是在將它們放入d屬性值中時路徑之間沒有逗號)將路徑放在一起應始終無需修改即可使用。

(在附註中,拉斐爾的回答使得SVG在閱讀他的鏈接和提示後對我來說變得更加神祕)