Mifano ya SVG

亲自试一试实例

下面的例子将 SVG 代码直接嵌入到 HTML 代码中。

Firefox、Internet Explorer 9、Google Chrome、Opera 和 Safari 都支持这么做。

Mifano ya SVG

SVG 基础形状

长方形
不透明的矩形
不透明度为 2 的矩形
带圆角的矩形
椭圆
三个椭圆彼此重叠
两个椭圆
线
有三个边的多边形
有四个边的多边形
星星
另一个星星
折线
另一条折线
路径
二次贝塞尔曲线
写一段文字
旋转文本
多行文本
作为链接的文本
定义线条、文本或轮廓的颜色 (stroke)
定义线条、文本或轮廓的宽度 (stroke-width)
定义开放路径的不同类型的结尾 (stroke-linecap)
定义虚线 (stroke-dasharray)

Kifiltre cha SVG

feGaussianBlur - 模糊效果
feOffset - 偏移一个矩形,然后将原始图像混合到偏移图像的顶部
feOffset - 模糊偏移的图像
feOffset - 使阴影变黑
feOffset - 将阴影处理为某种颜色
feBlend 滤镜
滤镜 1
滤镜 2
滤镜 3
滤镜 4
滤镜 5
滤镜 6

SVG 渐变

有从黄色到红色的水平线性渐变的椭圆
有从黄色到红色的垂直线性渐变的椭圆
有从黄色到红色的水平线性渐变的椭圆和文本
有从白色到蓝色的径向渐变的椭圆
一个具有从白色到蓝色的径向渐变的椭圆

SVG 杂项

5 秒内反复消失的矩形
一个会改变颜色的不断增长的矩形
makini ya mita ya kina mabaya ya rangi
Kuondoa matukio kwa sababu ya harakati
Kuondoa matukio kwa sababu ya harakati
Kuondoa matukio, kuuondoa na kushambulia matukio, na kushambulia kikondo cha kuzungumza kwa sababu ya harakati + kikondo cha kuzungumza cha kuzingatia na kuzingatia kwa sababu ya harakati
Kuondoa kikondo kwa sababu ya harakati