SVG 渐变 – 线性
SVG 中使用 <linearGradient> 元素来创建线性渐变。以下是一个简单的例子,演示如何在一个矩形元素上应用线性渐变:<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- 创建一个线性渐变 --> <linearGradient id="linearGradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);sto...
SVG 阴影
SVG 中可以通过使用 <filter> 元素来添加阴影效果。常见的阴影效果包括 feDropShadow 滤镜。以下是一个简单的SVG示例,演示如何在一个矩形元素上添加阴影效果:<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- 创建一个阴影效果 --> <defs> <filter id="shadowFilter" x="0" y="0" width="150%" height="150%"> <feDropShadow dx="5" dy="5" stdDeviation="5" flood-color="black" /> </filter> ...
SVG 模糊效果
SVG(可缩放矢量图形)可以通过使用<filter>元素来添加模糊效果。常见的模糊效果包括高斯模糊(Gaussian Blur)。以下是一个简单的SVG示例,演示如何在一个圆形元素上添加高斯模糊效果:<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- 创建一个模糊效果 --> <defs> <filter id="blurFilter" x="0" y="0" width="100%" height="100%"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> </defs> <!-- 在...
SVG 滤镜
在SVG中,滤镜(Filter)是一种用于图形效果处理的技术,它可以被应用于SVG元素,从而改变它们的外观或添加特殊效果。以下是一个简单的SVG滤镜的例子:<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- 定义高斯模糊滤镜 --> <filter id="blurFilter" x="0" y="0" width="100%" height="100%"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> </defs> <!-- 应用滤镜的矩形 --> <rect wi...
SVG Stroke 属性
在SVG中,stroke 属性用于定义图形的边框颜色,即描边颜色。以下是一个简单的例子,演示如何在SVG中使用 stroke 属性:<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 矩形 --> <rect width="150" height="80" fill="lightblue" stroke="black" stroke-width="2" x="25" y="10" /> <!-- 圆形 --> <circle cx="100" cy="150" r="50" fill="lightgreen" stroke="red" str...
SVG 文本
在SVG中创建文本使用 <text> 元素。以下是一个简单的SVG文本的例子:<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <text x="20" y="40" font-family="Arial" font-size="20" fill="blue">SVG Text Example</text></svg>在这个例子中: <text> 元素用于创建文本。 x 和 y 属性定义了文本的基线起始点坐标。 font-family 属性定义了文本的字体。 font-size 属性定义了文本的字体大小。 fill 属性定义了文本的颜色。在这个例子中,文本的基线起始点位于 (20, 40) 的位置,字体为 Arial,字体大小为 20,颜色为蓝色。你可以根据需要调整这些属性以...
SVG 路径
SVG 中的路径使用 <path> 元素来定义,通过 d 属性指定路径数据。路径数据是由一系列命令和参数组成的字符串。以下是一个简单的SVG路径的例子:<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="black" stroke-width="2" /></svg>在这个例子中,路径数据是 "M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"。解释如下: M 表示移动到指定坐标,后面的两个数字是起始点的 x 和 y 坐标。 C 表示三次贝塞尔曲线,后面的六个数字依次是两个控制点和终点的坐标。 S 表示光滑...
SVG 曲线
在SVG中创建曲线使用 <path> 元素,并通过 d 属性来定义路径数据。以下是一个简单的SVG曲线的例子:<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="M10 80 Q 95 10 180 80" fill="none" stroke="purple" stroke-width="2" /></svg>解释: <path> 元素用于创建路径。 d 属性定义了路径的数据。在这个例子中,M 表示移动到指定坐标,Q 表示二次贝塞尔曲线,后面的坐标是曲线的控制点和终点。 fill 属性定义了曲线的填充颜色。 stroke 属性定义了曲线的边框颜色。 stroke-width 属性定义了曲线的边框宽度。在这个例子中,曲线的路径从起始点 (10, 80) 移动到控制点 (95, 10),然后到...
SVG 多边形
在SVG中创建多边形使用 <polygon> 元素。以下是一个简单的SVG多边形的例子:<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <polygon points="100,10 40,198 190,78 10,78 160,198" fill="orange" stroke="black" stroke-width="2" /></svg>解释: <polygon> 元素用于创建多边形。 points 属性定义了多边形的各个顶点坐标。坐标之间用空格或逗号分隔。 fill 属性定义了多边形的填充颜色。 stroke 属性定义了多边形的边框颜色。 stroke-width 属性定义了多边形的边框宽度。在这个例子中,多边形的顶点坐标为 (100,10)、(40,198)、(190,78)、(10,78)...
SVG 直线
在SVG中创建直线使用 <line> 元素。以下是一个简单的SVG直线的例子:<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <line x1="50" y1="50" x2="150" y2="150" stroke="blue" stroke-width="2" /></svg>解释: <line> 元素用于创建直线。 x1 和 y1 属性定义了直线的起始点坐标。 x2 和 y2 属性定义了直线的结束点坐标。 stroke 属性定义了直线的颜色。 stroke-width 属性定义了直线的宽度。在这个例子中,直线的起始点为 (50, 50),结束点为 (150, 150)。直线的颜色为蓝色,宽度为2。你可以根据需要调整这些属性以及添加其他属性,以满足你的具体设计...
SVG 椭圆
在SVG中创建椭圆使用 <ellipse> 元素。以下是一个简单的SVG椭圆的例子:<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="75" rx="80" ry="40" fill="lightcoral" stroke="black" stroke-width="2" /></svg>解释: <ellipse> 元素用于创建椭圆。 cx 和 cy 属性定义了椭圆的中心坐标。 rx 属性定义了椭圆在x轴方向上的半径。 ry 属性定义了椭圆在y轴方向上的半径。 fill 属性定义了椭圆的填充颜色。 stroke 属性定义了椭圆的边框颜色。 stroke-width 属性定义了椭圆的边框宽度。在这个例子中,...
SVG 圆形
在SVG中创建圆形使用 <circle> 元素。以下是一个简单的SVG圆形的例子:<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="50" fill="lightgreen" stroke="black" stroke-width="2" /></svg>解释: <circle> 元素用于创建圆形。 cx 和 cy 属性定义了圆心的坐标。 r 属性定义了圆的半径。 fill 属性定义了圆的填充颜色。 stroke 属性定义了圆的边框颜色。 stroke-width 属性定义了圆的边框宽度。在这个例子中,圆心位于 (100, 100) 的位置,半径为 50。圆被填充为浅绿色,具有黑色的边框。你可以根据需要调整这些...
SVG 矩形
在SVG中创建矩形使用 <rect> 元素。以下是一个简单的SVG矩形的例子:<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <rect width="150" height="80" fill="lightblue" stroke="black" stroke-width="2" x="25" y="10" /></svg>解释: <rect> 元素用于创建矩形。 width 和 height 属性定义了矩形的宽度和高度。 fill 属性定义了矩形的填充颜色。 stroke 属性定义了矩形的边框颜色。 stroke-width 属性定义了矩形的边框宽度。 x 和 y 属性定义了矩形的位置。在这个例子中,矩形的左上角位于 (25, 10) 的位置...
SVG 在 HTML 中
将SVG嵌入HTML文档中是非常常见的,可以通过使用 <svg> 标签在HTML中包裹SVG内容。以下是一个简单的例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG in HTML Example</title></head><body> <h2>SVG Example in HTML</h2> <!-- SVG 图形 --> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg...
SVG 实例
以下是一个简单的SVG实例,展示了一个带有矩形和文本的SVG图形。该图形包含一个矩形和一段居中显示的文本。<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- 矩形 --> <rect width="150" height="80" fill="lightblue" stroke="black" stroke-width="2" x="25" y="10" /> <!-- 文本 --> <text x="100" y="55" font-family="Arial" font-size="16" fill="black" text-anchor...
SVG 简介
SVG(Scalable Vector Graphics,可缩放矢量图形)是一种用于描述二维矢量图形的XML标记语言。与基于像素的图像格式(如JPEG、PNG)不同,SVG使用矢量图形,允许图形在不失真的情况下随着尺寸的变化而缩放。这使得SVG非常适合用于创建可在不同设备和屏幕尺寸上呈现的图形。以下是SVG的一些基本特点和用途:特点:1. 矢量图形: SVG使用数学公式描述图形,因此图形可以无限缩放而不失真,适用于各种分辨率和屏幕尺寸。2. 文本可编辑: SVG文档是基于文本的,可以用文本编辑器打开和编辑,也可以与版本控制系统一起使用。3. 可通过CSS样式: SVG元素可以通过CSS进行样式化,包括颜色、边框、填充等。4. 交互性: SVG支持通过JavaScript添加交互性,使得用户可以与图形进行互动。5. 嵌套和组合: SVG允许嵌套和组合多个元素,创建复杂的图形结构。6. 动画: SVG支持通过CSS和SMIL(Synchronized Multimedia Integration Language)添加动画效果。用途:1. Web图形: SVG常用于Web开发中,用于绘制图...
SVG 教程
SVG(可缩放矢量图形)是一种用于描述二维矢量图形的XML标记语言,通常用于在Web页面上显示图形。以下是一个简单的SVG教程,介绍SVG的基本概念和用法:1. SVG基础1.1 SVG文档结构一个简单的SVG文档的基本结构如下:<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- 在这里添加图形元素 --></svg> width 和 height 定义了SVG画布的宽度和高度。 xmlns 属性用于指定XML命名空间。1.2 SVG图形元素常见的SVG图形元素包括: <rect>:矩形 <circle>:圆形 <ellipse>:椭圆 <line>:直线 <polyline>:折线 <polygon>:多边形 <path>:路径2. SVG图形绘制2.1 矩形(Rectangle)<rect width=&qu...