webattack.pl - CSS - funkcje

CSS - funkcje - path()

<path> - path - ścieżka

Element <path> jest używany do tworzenia linii, krzywych, łuków i innych kształtów.

symbol	polecenie	polecenie
d	draw	rysować
M	move to	przenieś do / przejdź do (punkt początkowy)
L	line to	linia do
H	horizontal line to	pozioma linia do
V	vertical line to	pionowa linia do
C	cubic Bézier curve	sześcienna krzywa Béziera
S	smooth cubic Bézier curve to	gładka sześcienna krzywa Béziera do
Q	quadratic Bézier curve	kwadratowa krzywa Béziera
T	smooth quadratic Bézier curve to	gładka kwadratowa krzywa Béziera do
A	elliptical Arc	łuk eliptyczny
Z	close path	zamknięcie ścieżki

Wielkie litery oznaczają bezwzględne pozycjonowanie.
Małe litery oznaczają względne pozycjonowanie (np. przesuń 10px w górę i 15px w lewo od ostatniego punktu).

linie

L - narysowanie linii do określonego punktu
H - narysowanie linii do określonego miejsca na osi poziomej
V - narysowanie linii do określonego miejsca na osi pionowej


<svg width="300" height="300">

      <path d="M0 0 L100 100 M200 200 L300 300" fill="red" stroke="black" stroke-width="3" />

</svg>

wynik kodu


<svg width="300" height="300">

      <path d="M 10 290 L 290 10" stroke="black" stroke-width="3" />

</svg>

wynik kodu


<svg width="300" height="300">

      <path d="M 10 290 L 290 10 L290 290" fill="white" stroke="black" stroke-width="3" />

</svg>

wynik kodu


<svg width="300" height="300">

      <path d="M 10 290 L 290 10 L290 290 L10 290" fill="white" stroke="black" stroke-width="3" />

</svg>

wynik kodu


<svg width="300" height="300">

      <path d="M 10 290 L 290 10 L290 290" />

</svg>

wynik kodu


<svg width="400" height="200">

	    <path d="M 10 10 L 390 10 L390 190 L 10 190 Z" fill="Plum" stroke="transparent"/>

</svg>

wynik kodu


<svg width="400" height="200">

	    <path d="M 10 10 H 390 V 190 H 10 Z" fill="SlateGray" stroke="transparent"/>

</svg>

wynik kodu


<svg width="400" height="200">

	    <path d="M 10 10 L 390 10 L390 190 Z" />

</svg>

wynik kodu


<svg width="400" height="200">

	    <path d="M 10 10 L 390 10 L390 190 Z" fill="transparent" stroke="SlateGray"/>

</svg>

wynik kodu


<svg width="400" height="200">

	    <path d="M 10 10 L 390 10 L390 190 Z" fill="SlateGray" stroke="transparent"/>

</svg>

wynik kodu


<svg width="400" height="200">

	    <path d="M 200 10 L 10 190 L 390 190 Z"/>

</svg>

wynik kodu


<svg width="400" height="200">

	    <path d="M 200 10 L 10 100 L200 190 L 390 100 Z" />

</svg>

wynik kodu


<svg width="200" height="200">

	    <path d="M10 70 H70 V10 H130 V70 H190 V130 H130 V190 H70 V130 H10 V70 Z" />

</svg>

wynik kodu

sześcienna krzywa Béziera

C przyjmuje trzy parametry: pierwszy punkt kontrolny, drugi punkt kontrolny oraz punkt końcowy krzywej.


<svg width="200" height="200">

      <path d="M 10 10 C 70 70, 130 70, 190 10" stroke="black" fill="transparent"/>

</svg>



<svg width="200" height="200">

      <path d="M 10 10 C 70 130, 130 130, 190 10" stroke="black" fill="transparent"/>

</svg>



<svg width="200" height="200">

      <path d="M 10 10 C 70 190, 130 190, 190 10" stroke="black" fill="transparent"/>

</svg>

wynik kodu


<svg width="200" height="200">

      <path d="M 10 190 C 70 130, 130 130, 190 190" stroke="black" fill="transparent"/>

</svg>



<svg width="200" height="200">

      <path d="M 10 190 C 70 70, 130 70, 190 190" stroke="black" fill="transparent"/>

</svg>



<svg width="200" height="200">

      <path d="M 10 190 C 70 10, 130 10, 190 190" stroke="black" fill="transparent"/>

</svg>

wynik kodu

gładka sześcienna krzywa Béziera do

S przyjmuje dwa parametry: punkt kontrolny i punkt końcowy krzywej.


<svg width="380" height="380">

      <path d="M 10 190 C 70 10, 130 10, 190 190 S310 370, 370 190" stroke="black" fill="transparent"/>

</svg>

wynik kodu


<svg width="560" height="380">

      <path d="M 10 190 C 70 10, 130 10, 190 190 S310 370, 370 190 S490 10, 550 190" stroke="black" fill="transparent"/>

</svg>

wynik kodu

kwadratowa krzywa Béziera

Q przyjmuje dwa parametry: punkt kontrolny i punkt końcowy krzywej.


<svg width="200" height="200">

        <path d="M 10 190 Q100 150, 190 190" stroke="black" fill="transparent"/>

</svg>



<svg width="200" height="200">

        <path d="M 10 190 Q100 0, 190 190" stroke="black" fill="transparent"/>

</svg>



<svg width="200" height="200">

        <path d="M 10 190 Q100 -150, 190 190" stroke="black" fill="transparent"/>

</svg>

wynik kodu

gładka kwadratowa krzywa Béziera do

T przyjmuje jeden parametr: punkt końcowy krzywej.


<svg width="380" height="400">

        <path d="M 10 190 Q100 -150, 190 190 T370 190" stroke="black" fill="transparent"/>

</svg>

wynik kodu


<svg width="560" height="400">

        <path d="M 10 190 Q100 -150, 190 190 T370 190 T550 190" stroke="black" fill="transparent"/>

</svg>

wynik kodu

łuki

A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy


<svg width="300" height="300">

      <path d="M10 150 A 10 10 1 0 1 50 150 L290 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M10 150 A 20 20 1 0 1 100 150 L290 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M10 150 A 30 30 1 0 1 150 150 L290 150" fill="red" stroke="black" stroke-width="3" />

</svg>

wynik kodu


<svg width="300" height="300">

      <path d="M10 150 A 20 20 1 0 1 250 150 L290 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M10 150 A 30 30 1 0 1 290 150 L290 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M10 150 A 30 30 1 0 1 290 150 L290 150 L10 150" fill="red" stroke="black" stroke-width="3" />

</svg>

2 wynik kodu


<svg width="300" height="300">

      <path d="M10 150 A 30 30 1 0 1 290 150 L290 150 L290 290" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M10 150 A 30 30 1 0 1 290 150 L290 150 L290 290 L10 290" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M10 150 A 30 30 1 0 1 290 150 L290 150 L290 290 L10 290 L10 150" fill="red" stroke="black" stroke-width="3" />

</svg>

3 wynik kodu


<svg width="300" height="300">

      <path d="M10 150 L290 150 A 10 10 0 0 1 50 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M10 150 L290 150 A 20 20 0 0 1 100 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M10 150 L290 150 A 30 30 0 0 1 150 150" fill="red" stroke="black" stroke-width="3" />

</svg>

4 wynik kodu


<svg width="300" height="300">

      <path d="M0 150 L290 150 A 10 10 0 0 1 50 50" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M0 150 L290 150 A 20 20 0 0 1 100 100" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M0 150 L290 150 A 30 30 0 0 1 150 150" fill="red" stroke="black" stroke-width="3" />

</svg>

5 wynik kodu


<svg width="300" height="300">

      <path d="M0 150 L290 150 A 10 10 0 0 1 150 175" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M0 150 L290 150 A 20 20 0 0 1 150 200" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M0 150 L290 150 A 30 30 0 0 1 150 250" fill="red" stroke="black" stroke-width="3" />

</svg>

6 wynik kodu


<svg width="300" height="300">

      <path d="M0 150 L290 150 A 10 30 0 0 1 150 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M0 150 L290 150 A 20 30 0 0 1 150 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M0 150 L290 150 A 30 30 0 0 1 150 150" fill="red" stroke="black" stroke-width="3" />

</svg>

7 wynik kodu


<svg width="300" height="300">

      <path d="M0 150 L290 150 A 10 30 45 0 1 150 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M0 150 L290 150 A 10 30 0 0 1 150 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M0 150 L290 150 A 10 30 -45 0 1 150 150" fill="red" stroke="black" stroke-width="3" />

</svg>

8 wynik kodu