SVG Examples
- Previous Page SVG Radial Gradients
- Next Page Reference Manual for SVG
Probeer het zelf met de voorbeeld
Het volgende voorbeeld embedt SVG-code direct in HTML-code.
Firefox, Internet Explorer 9, Google Chrome, Opera en Safari ondersteunen dit allemaal.
SVG Examples
SVG basisvormen
- Cirkel
- Rechthoek
- Ondoorzichtig rechthoek
- Rechthoek met ondoorzichtigheid van 2
- Rechthoek met afgeronde hoeken
- Ovaal
- Drie ovaal die elkaar overlappen
- Twee ovaal
- Lijn
- Een driehoek
- Een vierzijdig veelhoek
- Ster
- Een andere ster
- Boog
- Een andere boog
- Pad
- Tweede Béziers-kromme
- Schrijf een stuk tekst
- Tekst roteren
- Meerrijige tekst
- Tekst als koppeling
- Definieer de kleur van lijnen, tekst of contouren (stroke)
- Definieer de breedte van lijnen, tekst of contouren (stroke-width)
- Definieer de verschillende soorten afsluitingen van een open pad (stroke-linecap)
- Definieer de streepjes (stroke-dasharray)
SVG Filters
- feGaussianBlur - Vague effect
- feOffset - Verschuift een rechthoek en mengt de oorspronkelijke afbeelding bovenop de verschoven afbeelding
- feOffset - Vague afgeleide afbeelding
- feOffset - Maakt de schaduw zwart
- feOffset - De schaduw wordt behandeld als een bepaalde kleur
- feBlend filter
- Filter 1
- Filter 2
- Filter 3
- Filter 4
- Filter 5
- Filter 6
SVG verloop
- Een ovaal met een horizontale lineaire overgang van geel naar rood
- Een ovaal met een verticale lineaire overgang van geel naar rood
- Een ovaal en tekst met een horizontale lineaire overgang van geel naar rood
- Een ovaal met een radiaal verloop van wit naar blauw
- Een ovaal met een radiaal verloop van wit naar blauw
SVG variëteiten
- Een rechte hoek die binnen 5 seconden herhaaldelijk verdwijnt
- Een rechte hoek die zijn kleur kan veranderen en voortdurend groeit
- Drie rechte hoeken die hun kleur kunnen veranderen
- Moving text along a motion path
- Moving, rotating, and scaling text along a motion path
- Moving, rotating, scaling text along a motion path + growing rectangle that changes color continuously
- Rotating Ellipse
- Previous Page SVG Radial Gradients
- Next Page Reference Manual for SVG
