程序员自由职业

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 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...