codecamp

SVG 实例

SVG 实例

本节为你提供了一些 SVG 实例。

在线实例

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

谷歌Chrome，火狐，Internet Explorer9，和Safari都支持。

注意：下面的例子将不会在Opera运行，即使Opera支持SVG - 它也不支持SVG在HTML代码中直接使用。

SVG 实例

SVG基本形状

不透明矩形

一个矩形不透明2

一个带圆角矩形

累叠而上的三个椭圆

另一个星星

另一个折线

二次贝塞尔曲线

路径上文字

定义一条线，文本或轮廓颜色（stoke）

定义一条线宽度，文本或轮廓（stroke-width）

stroke-linecap属性定义不同类型的开放路径的终结：

定义虚线（stroke-dasharray）

SVG滤镜

feGaussianBlur - 模糊效果

feOffset - 偏移一个矩形，然后混合偏移图像顶部

feOffset - 模糊偏移图像

feOffset - 使阴影变黑色

feOffset - 为阴影涂上一层颜色

一个feBlend滤镜

一个feColorMatrix滤镜

一个feComponentTransfer滤镜

feOffset、feFlood、feComposite、feMerge 以及 feMergeNode

一个feMorphology滤镜

SVG渐变

水平线性渐变从黄色到红色的椭圆形

垂直线性渐变从黄色到红色椭圆形

水平线性渐变从黄色到红色并添加一个椭圆内文本

放射性渐变从白色到蓝色椭圆

放射性渐变从白色到蓝色的另一个椭圆

SVG杂项

重复用 5 秒时间淡出的矩形

矩形会变大并改变颜色

会改变颜色的三个矩形

沿一个运动路径移动的文本

沿一个运动路径移动、旋转并缩放的文本

沿一个运动路径移动、旋转并缩放的文本 + 逐步放大并改变颜色的矩形

温馨提示

下载编程狮App，免费阅读超1000+编程语言教程

取消

确定

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }