2013-02-20 194 views
2

我試圖爲Google地圖項目創建+號作爲SVG路徑。加號將使用圖標路徑屬性沿多段線繪製。到目前爲止,我已經設法靠近了,我的加號現在看起來像一條水平線,垂直線設置在一端「 - |」。我需要它出現在水平線的中間,使它看起來像一個加號。使用SVG路徑創建加號(+)

path: 'M 0,-1 0,1 H -1,1 0,1' 

我應該如何改變這種實現我的加號:

我現在的路徑是使用以下路徑命令來設置?我可以找到很多更復雜的形狀,曲線,漸變填充等例子,但是我的知識有限,我正努力尋找正確的座標來表達我的形狀!

+0

您可以使用文本元素而不是路徑,然後只是渲染一個加號字符? – robwilliams 2013-02-20 12:59:56

+0

我沒有想到 - 任何語法的概念? – bUKaneer 2013-02-20 13:04:31

+0

如果你正在做'var x = {path:'M 0,-1 0,1 H -1,1 0,1',strokeColor:'#f00'}',那麼我們不知道,但採取了瘋狂的猜測。 'var x = {text:'+',strokeColor:'#f00'}'? – robwilliams 2013-02-20 13:16:12

回答

4

我想你想要的是:

path: 'M0,-1 V1 M-1,0 H1'

其中在爲啓動轉換(0,-1),畫垂直1個單元,然後移動到(-1,0)和水平繪製1單元。

+0

啊啊,謝謝你,現場更簡潔!奇蹟般有效。您能否推薦任何優秀的在線資源來測試路徑等等,因爲每次我進行改變時,我都需要生成和重新加載我的應用程序的一些小路徑,這有點痛苦嗎?非常感謝! – bUKaneer 2013-02-20 15:23:19

+0

我什麼都不知道。我做了一些有點類似的事情,你可以拖動一些現有路徑的點並查看代碼:http://www.petercollingridge.co.uk/svg-tutorial/paths。也許我會嘗試做一些你可以添加新路徑和節點的地方。 – 2013-02-20 15:27:21

+0

嗨,感謝您的提示和您的帖子,我肯定會閱讀並使用它! ; O) – bUKaneer 2013-02-20 16:25:27

0

雖然林相當肯定這是不是使用以下路徑語句[更多通過反覆試驗和海龜的一些非常模糊的回憶]來形容這條道路的Ive設法構建一個加號的最簡潔的方式:

path: 'M 0,0 H 0.5,0.5 1,1 M 0,0 V 0.5,0.5 1,1 M 0,0 H -0.5,-0.5 -1,-1 M 0,0 V -0.5,-0.5 -1,-1',