THE WORLD'S LARGEST WEB DEVELOPER SITE

SVG 示例


Try-it Yourself 示例

The examples below embed the SVG code directly into the HTML code.

This is supported by Firefox, Internet Explorer 9, Google Chrome, Opera, and Safari.


SVG 示例

SVG Basic 形状

A circle
A rectangle
A rectangle with opacity
A rectangle with opacity 2
A rectangle with rounded corners
An ellipse
Three ellipses on top of each other
Two ellipses
A line
A polygon with three sides
A polygon with four sides
A star
Another star
A polyline
Another polyline
A path
A quadratic Bézier curve
Write a text
Rotate a text
Text on several lines
Text as a link
Defines the color of a line, text or outline (stroke)
Defines the width of a line, text or outline (stroke-width)
Defines different types of endings to an open path (stroke-linecap)
Defines dashed lines (stroke-dasharray)

SVG Filters

feGaussianBlur - blur effect
feOffset - offset a rectangle, then blend the original on top of the offset image
feOffset - blur the offset image
feOffset - make the shadow black
feOffset - treat the shadow as a color
A feBlend filter
Filter 1
Filter 2
Filter 3
Filter 4
Filter 5
Filter 6

SVG Gradients

An ellipse with a horizontal linear gradient from yellow to red
An ellipse with a vertical linear gradient from yellow to red
An ellipse with a horizontal linear gradient from yellow to red, and a text
An ellipse with a radial gradient from white to blue
Another ellipse with a radial gradient from white to blue

SVG Misc

Rectangle that repeatedly fade away over 5 seconds
A growing rectangle that will change color
Three rectangles that will change color
Move text along a motion path
Move, rotate, and scale text along a motion path
Move, rotate, and scale text along a motion path + a growing rectangle that will change color
Rotating ellipses




W3Schools is optimized for learning, testing, and training. 示例 might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

W3Schools.com