SVG 参考手册
SVG(可缩放矢量图形)是一种用于描述二维矢量图形的XML标记语言。以下是一份简要的SVG参考手册,包含一些常用的SVG元素和属性:常用SVG元素:1. <svg>:定义SVG文档的根元素。 - 属性:width、height 定义SVG画布的宽度和高度。2. <rect>:创建矩形。 - 属性:x、y 定义左上角坐标,width、height 定义宽度和高度。3. <circle>:创建圆形。 - 属性:cx、cy 定义圆心坐标,r 定义半径。4. <line>:创建直线。 - 属性:x1、y1 定义起点坐标,x2、y2 定义终点坐标。5. <path>:创建路径。 - 属性:d 定义路径数据。6. <text>:创建文本。 - 属性:x、y 定义文本起始点坐标。7. <g>:创建组。 - 用于组合多个图形元素。8. <lineargradient>:定义线性渐变。 - 用于创建从一个颜色过渡到另一个颜色的效果。9. <radialgradient&g...
SVG 渐变- 放射性
在SVG中,你可以使用径向渐变(radial gradient)来创建放射性渐变效果。以下是一个简单的SVG代码示例,演示如何在一个圆形上应用径向渐变:<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 创建一个圆形并应用径向渐变 --> <circle cx="100" cy="100" r="75" fill="url(#radialGradient)" /> <!-- 定义径向渐变 --> <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <sto...
SVG 渐变 - 线性
在SVG中,你可以使用线性渐变(linear gradient)来创建渐变效果。以下是一个简单的SVG代码示例,演示如何在一个矩形上应用线性渐变:<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 创建一个矩形并应用线性渐变 --> <rect width="150" height="150" fill="url(#linearGradient)" /> <!-- 定义线性渐变 --> <linearGradient id="linearGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style=&qu...
SVG 阴影
在SVG中,你可以使用<filter>元素来添加阴影效果。以下是一个简单的SVG代码示例,演示如何在一个矩形上应用阴影效果:<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 创建一个矩形 --> <rect width="150" height="150" fill="#3498db" /> <!-- 应用阴影滤镜 --> <filter id="shadowFilter" x="-20%" y="-20%" width="140%" height="140%"> <feDropShadow dx="5" dy="5" stdDeviation=&q...
SVG 模糊效果
SVG(可缩放矢量图形)可以通过使用滤镜(filter)来实现模糊效果。以下是一个简单的SVG代码示例,演示如何在SVG图形上应用模糊效果:<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 创建一个矩形 --> <rect width="100%" height="100%" fill="#3498db" /> <!-- 应用高斯模糊滤镜 --> <filter id="blurFilter" x="0" y="0" width="100%" height="100%"> <feGaussianBlur in="SourceGraphic" stdDeviation="5...
SVG 滤镜
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 width="100" height...
SVG Stroke 属性
在SVG中,stroke 属性用于定义图形的描边(边框)样式。stroke 属性可以应用于各种SVG元素,如线条、矩形、圆形、椭圆、路径等。以下是一些常见的 stroke 属性及其用法:1. 颜色(Color): <rect x="10" y="10" width="100" height="50" stroke="red" /> 在这个例子中,stroke 属性定义了矩形的描边颜色为红色。2. 宽度(Width): <line x1="10" y1="10" x2="90" y2="90" stroke="blue" stroke-width="2" /> 在这个例子中,stroke-width 属性定义了直线的描边宽度为2个用户单位。3. 线型(Line Type): <circle cx="50"...
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="brown">Hello, SVG!</text></svg>在这个例子中: 使用 <svg> 元素定义了SVG图形的画布,设置了宽度(width)和高度(height)。 使用 <text> 元素定义了文本,通过 x 和 y 属性设置文本的起始位置,通过 font-family、font-size 和 fill 属性设置字体、字号和颜色。 文本内容为 "Hello...
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="black" /></svg>在这个例子中: 使用 <svg> 元素定义了SVG图形的画布,设置了宽度(width)和高度(height)。 使用 <path> 元素定义了一个路径,通过 d 属性设置路径的数据。 M 表示移动到(Move To)指定的坐标,Q 表示二次贝塞尔曲线,依次指定了控制点和终点。 fill 属性设置为 "none" 表...
SVG 多段线
在SVG中,多段线通常使用 <polyline> 元素来表示。与多边形相比,多段线不会自动闭合,它只是连接各个点而不形成封闭区域。以下是一个简单的SVG多段线的例子:<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 多段线 --> <polyline points="10,80 40,60 70,80 100,20 130,80 160,60 190,80" fill="none" stroke="green" stroke-width="3" /></svg>在这个例子中: 使用 <svg> 元素定义了SVG图形的画布,设置了宽度(width)和高度(height)。 使用 <polyline> 元素定义了一条多段线,通过 points 属性设置了多段线各个点的坐标。 ...
SVG 多边形
在SVG中,多边形通过 <polygon> 元素来表示。以下是一个简单的SVG多边形的例子:<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 多边形 --> <polygon points="100,10 150,90 50,90" fill="gold" /></svg>在这个例子中: 使用 <svg> 元素定义了SVG图形的画布,设置了宽度(width)和高度(height)。 使用 <polygon> 元素定义了一个多边形,通过 points 属性设置了多边形各个顶点的坐标。 fill 属性设置了多边形的填充颜色为金色(gold)。points 属性中的坐标值以空格分隔,每一对坐标表示多边形的一个顶点。你可以根据需要调整多边形的顶点坐标和填充颜色。以下是一个包含调整的例子:<svg width=&q...
SVG 直线
在SVG中,直线通过 <line> 元素来表示。以下是一个简单的SVG直线的例子:<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- 直线 --> <line x1="10" y1="10" x2="190" y2="90" stroke="blue" stroke-width="2" /></svg>在这个例子中: 使用 <svg> 元素定义了SVG图形的画布,设置了宽度(width)和高度(height)。 使用 <line> 元素定义了一条直线,通过 x1 和 y1 属性设置了起点的坐标,通过 x2 和 y2 属性设置了终点的坐标。 stroke 属性设置了直线的颜色为蓝色,stroke-width 属性设置了直线的宽度为2。你...
SVG 椭圆
在SVG中,椭圆通过 <ellipse> 元素来表示。以下是一个简单的SVG椭圆的例子:<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- 椭圆 --> <ellipse cx="100" cy="50" rx="80" ry="30" fill="lightcoral" /></svg>在这个例子中: 使用 <svg> 元素定义了SVG图形的画布,设置了宽度(width)和高度(height)。 使用 <ellipse> 元素定义了一个椭圆,通过 cx 和 cy 属性设置了椭圆中心的坐标,通过 rx 和 ry 属性设置了水平和垂直方向的半轴长度。 fill 属性设置了椭圆的填充颜色为浅珊瑚色(lightcoral)。你可以根据需要调整椭圆的中心、半轴长...
SVG 圆形
SVG中的圆形通过 <circle> 元素来表示,以下是一个简单的SVG圆形的例子:<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 圆形 --> <circle cx="100" cy="100" r="80" fill="lightgreen" /></svg>在这个例子中: 使用 <svg> 元素定义了SVG图形的画布,设置了宽度(width)和高度(height)。 使用 <circle> 元素定义了一个圆形,通过 cx 和 cy 属性设置了圆心的坐标,通过 r 属性设置了圆的半径。 fill 属性设置了圆形的填充颜色为浅绿色(lightgreen)。你可以根据需要调整圆形的圆心、半径和样式。以下是一个包含圆心和半径调整的例子:<svg width=&quo...
SVG 矩形
SVG中的矩形通过 <rect> 元素来表示,以下是一个简单的SVG矩形的例子:<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- 矩形 --> <rect width="150" height="80" fill="lightblue" /></svg>在这个例子中: 使用 <svg> 元素定义了SVG图形的画布,设置了宽度(width)和高度(height)。 使用 <rect> 元素定义了一个矩形,通过 width 和 height 属性设置了矩形的宽度和高度。 fill 属性设置了矩形的填充颜色为浅蓝色(lightblue)。你可以根据需要调整矩形的大小、位置和样式。此外,你还可以使用其他属性,如 x 和 y 来指定矩形的起始位置。以下是一个包含起始位置的例子:<svg widt...
SVG 在 HTML 中
在HTML中使用SVG非常简单,你可以将SVG代码嵌入到HTML文档中。以下是一个示例,演示了如何在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</h2> <!-- SVG 图形 --> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> ...
SVG 实例
以下是一个简单的SVG示例,绘制一个包含矩形和文本的图形:<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- 矩形 --> <rect width="150" height="80" fill="lightblue" /> <!-- 文本 --> <text x="20" y="50" font-family="Arial" font-size="16" fill="black">Hello, SVG!</text></svg>在这个例子中: <svg> 元素定义了SVG图形的画布,指定了宽度(width)和高度(height)。 <rect> 元素定义了一个矩形,使...
SVG 简介
SVG 简介SVG(Scalable Vector Graphics,可缩放矢量图形)是一种基于XML的图形标准,用于描述二维矢量图形。与位图图像(如JPEG、PNG)不同,SVG图形是基于数学表达式的,因此可以在不失真的情况下进行任意缩放。这使得SVG成为Web开发中绘制图形和图表的强大工具。以下是SVG的一些基本特点和优势:1. 矢量图形:SVG使用矢量图形描述,图形以数学公式的形式存储,而不是像素阵列。这使得图形可以无限缩放而不失真,适用于不同尺寸和分辨率的屏幕。2. XML 基础:SVG文档是基于XML的,这使得SVG易于创建、编辑和解析。你可以使用文本编辑器直接编辑SVG代码,也可以通过图形编辑器生成SVG文件。3. 嵌入性:SVG可以嵌入到HTML文档中,通过 <svg> 元素,成为HTML文档的一部分。这样,可以在Web页面中直接嵌入图形而无需外部图像文件。4. 互动性和动画:SVG支持在图形中添加交互性和动画效果。通过CSS和JavaScript,可以实现各种交互行为和动画效果,使SVG成为创建动态Web内容的良好选择。5. 多种图形元素:SVG支持多种基本...
SVG 教程
SVG(可缩放矢量图形)是一种用于描述二维矢量图形的XML标记语言。它是一种开放的标准,可用于在Web中呈现图形,支持缩放而不失真。以下是一个简单的SVG教程,介绍了SVG的基本概念和用法。1. SVG 基本结构SVG文档由<svg>元素开始,定义了SVG画布的大小和其他属性。<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- SVG 内容 --></svg> width 和 height 属性定义了SVG画布的宽度和高度。 xmlns 属性指定SVG命名空间。2. 基本形状矩形 (<rect>)<rect width="100" height="50" fill="blue" /> width 和 height 定义了矩形的宽度和高度。 fill 定义了填充颜色。圆形 (<circle>)&l...
SVG 渐变- 放射性
SVG 中使用 <radialGradient> 元素来创建放射性渐变。以下是一个简单的例子,演示如何在一个圆形元素上应用放射性渐变:<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 创建一个放射性渐变 --> <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop...