6. svg學習筆記-路徑

時間 2019-12-10

標籤 svg 學習筆記路徑简体版

原文原文鏈接

路徑相比於多邊形<polygon>元素具備更強繪圖能力，<polygon>元素能夠繪製任意的多邊形，而路徑能夠繪製任意的輪廓線，是線段，曲線，圓弧的組合形式。svg中能夠使用<path>元素繪製路徑，全部描述輪廓線的數據都放在d屬性中，而且全部的路徑必須以moveto命令開始，命令以大寫的M開始，後面跟着用空格或者逗號分隔的x座標和y座標，例如：html

<path d="M 10,10 L 110,130" stroke="black"></path>

上面的代碼至關於svg

<line x1="10" y1="10" x2="110" y2="130" stroke="black"></line>

繪製一條從（10,10）到（110,130）的線段，其中的L表示lineto命令，接下來會有詳解spa

繪製線段

在路徑中繪製直線的命令是lineto命令，在d屬性中以大寫L或者小寫l表示，大寫的L表示絕對座標，小寫的l表示相對座標，lineto命令以後跟着線段的終點座標，表示從上一個座標繪製一條線段到lineto命令以後的座標，好比如下代碼：code

<path d="M 10,10 L 110,130" stroke="black"></path>

就是繪製一條從（10,10）到（110,130）的線段，由於代碼中使用大寫的L表示lineto命令，因此L以後的座標爲絕對座標。htm

<path d="M 10,10 l 100,120" stroke="black"></path>

上述代碼繪製的線段也是一條從（10,10）到（110,130）的線段，由於代碼中使用小寫的l表示相對座標，l以後的數值表示從當前座標水平平移100個單位，垂直平移120個單位，肯定線段終點的座標來繪製線段，也就是說l以後的兩個數值是相對於當前座標的，不是座標系上的絕對座標blog

在繪製線段的時候不可避免甚至會頻繁的繪製豎直線段或者水平線段，因此svg規範指定了繪製水平線段和豎直線段的快捷方式。ip

繪製水平線段的時候能夠使用大寫或者小寫H以後跟x座標來簡寫，當使用大寫H時，H以後的數值表示的是座標系x的絕對座標，至關於從當前座標（currentX，currentY）繪製一條到（X，currentY）的線段，X爲H以後的數值。使用小寫的h時，h以後的數值表示的是相對x座標，至關於繪製一條從當前座標(currentX，currentY)到（currentX+X，currentY）的線段，X爲h以後的數值。get

繪製豎直線段的時候能夠使用大寫或者小寫的V以後跟着y座標來簡寫，使用V的規則同上，繪製的線段至關於從(currentX，currentY)到（currentX，Y）絕對座標（使用大寫V）或者從(currentX，currentY)到（currentX，currentY +Y）相對座標（使用小寫v）it

示例代碼：class

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid #000">
        <path d="M 10,10 H 100" stroke="black"></path>
        <path d="M 10,20 h 100" stroke="black"></path>
        <path d="M 10,30 V 100" stroke="black"></path>
        <path d="M 20,40 v 100" stroke="black"></path>
    </svg>
</body>
</html>