菜单
×
我的 W3Schools 获取证书 Spaces 教师专用 Plus 获取证书 Spaces 教师专用 Plus
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

SVG 示例

❮ 上一篇 下一篇 ❯

动手实践示例

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

所有主流浏览器都支持 SVG。

SVG 矩形

带有六个基本属性和填充颜色的矩形 带有填充和描边的矩形 带有透明度的矩形 带有透明度的矩形 2 带有圆角的矩形

Examples explained

SVG 圆形

一个圆形 一个带边框的圆形 一个带透明度的圆形

Examples explained

SVG 椭圆

一个椭圆 叠在一起的三个椭圆 两个椭圆

Examples explained

SVG 线条

一条线 一条粗水平线 一条粗垂直线

Examples explained

SVG 多边形

一个三边形 一个四边形 一个六边形 一颗星 另一颗星

Examples explained

SVG 折线

一条折线 另一条折线

Examples explained

SVG 路径

一条路径 一条二次贝塞尔曲线

Examples explained

SVG 文本

使用 SVG 编写简单文本 无填充的文本 带填充和描边的文本 使用 rotate 属性旋转文本的每个字母 使用 transform 属性旋转整个文本 在 <text> 元素中使用 <tspan> 元素

Examples explained

SVG textPath

使用 <textPath> 元素沿路径排列文本 使用 <textPath> 元素和 textLength 属性沿路径排列文本

Examples explained

SVG 链接

文本作为链接 图形作为链接

Examples explained

SVG 图片

插入图片 在圆形上方显示图片，并在图片下方添加文本

Examples explained

SVG 标记

带开始标记和结束标记的线 带开始标记、中间标记和结束标记的折线

Examples explained

SVG 填充

使用 fill 属性设置图形的填充颜色 使用 fill-opacity 属性设置填充颜色的透明度 为多边形使用 fill-rule 属性，值为 "evenodd" 为多边形使用 fill-rule 属性，值为 "nonzero"

Examples explained

SVG 描边

使用 stroke 属性设置图形的轮廓颜色 使用 stroke 属性设置线的颜色 使用 stroke-width 属性设置轮廓宽度 使用 stroke-width 属性设置线的宽度 使用 stroke-opacity 属性设置轮廓的透明度 使用 stroke-opacity 属性设置线的透明度 使用 stroke-linecap 属性设置线的不同端点样式 使用 stroke-dasharray 属性创建虚线 使用 stroke-dasharray 属性创建虚线轮廓 使用 stroke-linejoin 属性创建不同的转角形状

Examples explained

SVG 滤镜简介

使用 <feGaussianBlur> 滤镜模糊 SVG 图形

Examples explained

SVG 滤镜模糊效果

使用 <feGaussianBlur> 滤镜创建模糊效果 使用 stdDeviation 属性设置模糊量

Examples explained

SVG 滤镜阴影 1

使用 <feDropShadow> 滤镜创建阴影效果

Examples explained

SVG 滤镜阴影 2

偏移矩形，然后将原始矩形与偏移图像混合 模糊偏移图像 将阴影设为黑色 将阴影视为颜色矩阵 feBlend 滤镜 滤镜 1 滤镜 2 滤镜 3 滤镜 4 滤镜 5 滤镜 6

Examples explained

SVG 线性渐变

带有两种颜色的水平线性渐变 带有三种颜色的水平线性渐变 带有两种颜色的垂直线性渐变 带有文本的水平线性渐变 带有两种颜色的角度线性渐变

Examples explained

SVG 径向渐变

带有两种颜色的径向渐变 带有三种颜色的径向渐变 cx 和 cy 为 25% 的径向渐变 spreadMethod="reflect" 的径向渐变 spreadMethod="repeat" 的径向渐变 带有两种颜色和 stop-opacity 的径向渐变

Examples explained

SVG 图案

创建一个由小圆组成的矩形 创建一个由小浅蓝色矩形和渐变圆组成的矩形

Examples explained

SVG 变换

Translate() 函数：水平移动对象 Translate() 函数：垂直移动对象 Translate() 函数：水平和垂直移动对象 Scale() 函数：缩放对象 Scale() 函数：垂直缩放对象 Scale() 函数：水平缩放对象 Rotate() 函数：按角度旋转对象 SkewX() 函数：沿 x 轴按角度倾斜对象 SkewY() 函数：沿 y 轴按角度倾斜对象

Examples explained

SVG 裁剪和遮罩

<clipPath>：移除元素的某一部分 <mask>：为元素应用矩形遮罩 <mask>：为元素应用圆形遮罩 <mask>：填充颜色和透明度 <mask>：遮罩中的渐变

Examples explained

SVG 动画

<set>：在指定持续时间内设置某个属性的值 <animate>：为元素的某个属性设置动画 <animate>：保持动画 <animateTransform>：为目标元素设置 transform 属性动画 <animateMotion>：设置元素沿运动路径移动的方式

Examples explained

SVG 脚本

使用 JavaScript 更改属性值 使用 JavaScript 更改 CSS 使用 JavaScript 更改属性值和 CSS 使用 JavaScript 为元素设置动画

Examples explained

SVG 杂项

矩形在 5 秒内反复消失 一个不断增长的矩形，将改变颜色 三个将改变颜色的矩形 文本沿运动路径移动 文本沿运动路径移动、旋转和缩放 文本沿运动路径移动、旋转和缩放 + 一个不断增长的矩形，将改变颜色 旋转的椭圆

❮ 上一篇 下一篇 ❯
PLUS
空格
获取证书
面向教师
面向企业
联系我们
×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业，请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误，或想提出建议，请发送电子邮件给我们
help@w3schools.com

热门教程
HTML 教程
CSS 教程
JavaScript 教程
操作方法教程
SQL 教程
Python 教程
W3.CSS 教程
Bootstrap 教程
PHP 教程
Java 教程
C++ 教程
jQuery 教程
热门参考
HTML 参考
CSS 参考
JavaScript 参考
SQL 参考
Python 参考
W3.CSS 参考
Bootstrap 参考
PHP 参考
HTML 颜色
Java 参考
Angular 参考
jQuery 参考
热门示例
HTML 示例
CSS 示例
JavaScript 示例
操作方法示例
SQL 示例
Python 示例
W3.CSS 示例
Bootstrap 示例
PHP 示例
Java 示例
XML 示例
jQuery 示例
获取证书
 HTML 证书
CSS 证书
JavaScript 证书
前端证书
SQL 证书
Python 证书
PHP 证书
jQuery 证书
Java 证书
C++ 证书
C# 证书
XML 证书
论坛 关于 学院
W3Schools 经过优化，旨在方便学习和培训。示例可能经过简化，以提高阅读和学习体验。
教程、参考资料和示例会不断审查，以避免错误，但我们无法保证所有内容的完全正确性。
使用 W3Schools 即表示您已阅读并接受我们的使用条款、Cookie 和隐私政策。

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持。