SVG教程

SVG表示可缩放矢量图形,它是一种基于XML格式,用于绘制矢量图像的技术。 它可用于绘制两维矢量图像。

本教程将介绍SVG的基础知识。包含讨论SVG所有基本组件的章节,并附有合适的示例。

面向读者

此教程资料已为初学者准备,以帮助他们了解与SVG相关的基本概念。 本教程也提供足够的SVG理解,从这里您可以进阶到SVG更高水平的专业知识。

前提条件

在继续本教程之前,要求读者应该具备XML,HTML和Javascript的基本知识。

问题反馈

我们不能保证您在学习此SVG教程的过程中不会遇到任何问题。本教程中的讲解,示例和代码等只是根据作者的理解来概括写出。由于作者水平和能力有限,因此不保正所有编写的文章都准确无误。但是如果有遇到任何错误或问题,请反馈给我们,我们会及时纠正以方便后续读者阅读。


猿狮妹
2022-12-05
SVG教程 编程课程
热门教程
1 SVG教程 SVG表示可缩放矢量图形,它是一种基于XML格式,用于绘制矢量图像的技术。 它可用于绘制两维矢量图像。
2 SVG文本 元素用于绘制文本。 声明以下是元素的语法声明。 这里只显示了一些主要属性。
3 SVG线性渐变 SVG线性渐变用于表示一种颜色到另一种颜色的线性转换。元素定义线性渐变。可以使用元素中的元素。 线性
4 SVG形状 SVG提供了许多可用于绘制图像的形状。 以下是常见的形状。 编号 形状类型 描述 1 rect 用于绘制一个矩形。 2 circle 用于绘制一个圆
5 SVG模糊效果 SVG使用元素来显示模糊效果。 Internet Explorer 9和更早版本不支持SVG筛选器 示例
6 SVG <filter>元素 SVG使用元素来定义滤镜。 元素使用一个id属性来唯一标识它。滤镜在元素中定义,然后由它们的id通过图形元素引用。 SVG
7 SVG事件监听器 在SVG中,可以直接将各种事件监听器添加到SVG shape 。 示例:
8 SVG渐变 渐变是指形状内一种颜色平滑过渡到另一种颜色。 SVG提供了两种类型的渐变。 线性渐变 - 表示从一个方向到另一个方向的一种颜色到另一种颜色的线
9 SVG简介 SVG是一种以快速开发和高性能为目标来开发图形的Google XML格式语言。 它有以下特点 - SVG(Scalable Vector Graphics)是一种基于XML的语言,用于定义基于矢
10 SVG交互 SVG图像可以响应用户的操作。 SVG支持指针事件,键盘事件和文档事件。看看下面的例子。 实例文件:testSVG.html - SVG Interactivity<</small> </div> </div> </div> </div> </div> </div> </div> <div class="col-sm-12"> <div class="card mt-1"> <div class="card-header"> <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon text-orange" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="9" y1="12" x2="15" y2="12" /><line x1="12" y1="9" x2="12" y2="15" /><path d="M4 6v-1a1 1 0 0 1 1 -1h1m5 0h2m5 0h1a1 1 0 0 1 1 1v1m0 5v2m0 5v1a1 1 0 0 1 -1 1h-1m-5 0h-2m-5 0h-1a1 1 0 0 1 -1 -1v-1m0 -5v-2m0 -5" /></svg> </span> SVG 教程 </div> <div class="card-body"> <div class="list-group list-group-flush list-group-hoverable"> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg.html" class="text-body d-block text-muted text-truncate" title="SVG教程"> SVG教程</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/svg_overview.html" class="text-body d-block text-muted text-truncate" title="SVG简介"> SVG简介</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/svg_shapes.html" class="text-body d-block text-muted text-truncate" title="SVG形状"> SVG形状</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/svg_text.html" class="text-body d-block text-muted text-truncate" title="SVG文本"> SVG文本</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/svg_stroke.html" class="text-body d-block text-muted text-truncate" title="SVG stroke属性"> SVG stroke属性</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/svg_filters.html" class="text-body d-block text-muted text-truncate" title="SVG <filter>元素"> SVG <filter>元素</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/svg_patterns.html" class="text-body d-block text-muted text-truncate" title="SVG <pattern>元素"> SVG <pattern>元素</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/svg_gradients.html" class="text-body d-block text-muted text-truncate" title="SVG渐变"> SVG渐变</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/svg_interactivity.html" class="text-body d-block text-muted text-truncate" title="SVG交互"> SVG交互</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/svg_linking.html" class="text-body d-block text-muted text-truncate" title="SVG链接"> SVG链接</a> </div> </div> </div> <div class="list-group-item bg-blue"> <div class="row align-items-center"> <div class="col text-truncate "> <a href="#" class="text-body d-block text-white" title="SVG实例"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 4h6a2 2 0 0 1 2 2v14l-5 -3l-5 3v-14a2 2 0 0 1 2 -2" /></svg>SVG实例</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/svg_loader.html" class="text-body d-block text-muted text-truncate" title="SVG加载器示例"> SVG加载器示例</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/dialog.html" class="text-body d-block text-muted text-truncate" title="SVG对话框效果"> SVG对话框效果</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/icons.html" class="text-body d-block text-muted text-truncate" title="SVG图标"> SVG图标</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/clock.html" class="text-body d-block text-muted text-truncate" title="SVG时钟"> SVG时钟</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/drag.html" class="text-body d-block text-muted text-truncate" title="SVG拖动"> SVG拖动</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/amchart.html" class="text-body d-block text-muted text-truncate" title="SVG图表"> SVG图表</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/graph.html" class="text-body d-block text-muted text-truncate" title="SVG图形"> SVG图形</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/flat.html" class="text-body d-block text-muted text-truncate" title="SVG平面阴影"> SVG平面阴影</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/svg-scripting.html" class="text-body d-block text-muted text-truncate" title="SVG脚本(JavaScript)"> SVG脚本(JavaScript)</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/event-listener.html" class="text-body d-block text-muted text-truncate" title="SVG事件监听器"> SVG事件监听器</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/svg-blur-effect.html" class="text-body d-block text-muted text-truncate" title="SVG模糊效果"> SVG模糊效果</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/svg-drop-shadow-effect.html" class="text-body d-block text-muted text-truncate" title="SVG阴影效果"> SVG阴影效果</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/svg-linear-gradients.html" class="text-body d-block text-muted text-truncate" title="SVG线性渐变"> SVG线性渐变</a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col text-truncate"> <a href="https://vcclass.net/tutorial/svg/svg-radial-gradients.html" class="text-body d-block text-muted text-truncate" title="SVG径向渐变"> SVG径向渐变</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="container"> <footer class="footer footer-transparent d-print-none"> <div class="row text-center align-items-center flex-row-reverse"> <div class="col-lg-auto ms-lg-auto"> <ul class="list-inline mb-0"> </ul> </div> <div class="col-12 col-lg-auto mt-3 mt-lg-0"> <ul class="list-inline mb-0"> <li class="list-inline-item"> Copyright © 2021 <a href="https://vcclass.net" class="link-secondary">猿狮院</a>, All rights reserved. </li> <li class="list-inline-item"> </li> </ul> </div> </div> </footer> </div> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-M2J2BND4Y8"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-M2J2BND4Y8'); </script> <script src="https://vcclass.net/js/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="https://vcclass.net/js/libs/jquery/dist/jquery.slim.min.js"></script> <script type="text/javascript" src="https://vcclass.net/js/tabler.min.js"></script> <script type="text/javascript" src="https://vcclass.net/js/app.min.js"></script> </body> </html>