如何使用單個路徑繪製SVG曲線？

我有一個關於這個

1.可我們繪製了single path整個畫布3相對的問題？

2.如果我們只能使用多條路徑來繪製整體，那麼給它們動畫會很方便嗎？

3.在這兩種情況下，任何人都可以提供足夠的指導，以正確的方式使用樣本。

這是我到目前爲止的地方......你可以看到我不是SVG的專家，當然，你可以使用圓圈作爲大圓點。先謝謝你。

svg { 
 
    width: 100%; 
 
} 
 

 
.straightLine { 
 
    height: 3000px; 
 
    position: relative; 
 
} 
 

 
.st0 { 
 
    fill: none; 
 
    stroke-dashoffset: 3px; 
 
    stroke: #000000; 
 
    stroke-width: 5; 
 
    stroke-miterlimit: 10; 
 
}

<div class="straightLine"> 
 
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1280 1000" style="enable-background:new 0 0 1280 800;" xml:space="preserve"> 
 
\t <g class="all"> 
 
\t <path id="line1" class="st0" stroke-dasharray="10,9" d="M 35 -17 C 0 190 50 83 600 109 "/> 
 
\t <path id="line1" class="st0" stroke-dasharray="10,9" d="M 600 109 c 64.9 0 90.4 40.5 90.4 90.4"/> 
 
\t </g> 
 
    </svg> 
 
</div>

來源

2017-08-03 weBBer

您可能更喜歡在專業程序（如Illustrator或GIMP）中繪製路徑，然後將其作爲SVG導出。手繪這些線條是可能的，但也很複雜。 – Terry

@Terry我在** illustrater **中創建了自己的圖片，但那不是我想要的。我使用這個''在頁面的滾動上做了一些動畫，這就是爲什麼我正在尋找一個CSS選項。所以，如果可以幫助我.typ – weBBer

你想做什麼樣的動畫？你的問題並不清楚。你想讓路徑動畫嗎？或者沿着路徑動畫圈的位置？ – Terry

使用類似：

<path d="M 20 0 v 20 a 30 30 0 0 0 30 30 h 600 a 40 40 0 0 1 0 80 h -140 a 30 30 0 0 0 0 60 h 200 a 40 40 0 0 1 0 80 h -100 a 30 30 0 0 0 -30 30 v 20" />

如the documentation所示的路徑可以包含的分量的任意編號。

作爲總結：

M/m Move current position 
L/l Draw a line 
H/h Draw a horizontal line 
V/v Draw a vertical line 
C/c Draw a cubic Bezier 
Q/q Draw a quadratic Bezier 
A/a Draw a circular/elliptal arc 
Z/z Close path

一般來說，大寫指令指定絕對座標和小寫指令規定了相對的。

來源

2017-08-03 12:36:12 Phylogenesis

還有一件事，對於圓點，我們應該在' weBBer

實心圓圈需要一個新元素。無論是以''還是另一個''完成都取決於你。 – Phylogenesis

我們怎樣才能把它定位在同一個地方。我們可以使用'position：absolute'還是' weBBer

如何使用單個路徑繪製SVG曲線？

回答

相關問題