和其它矢量化图形工具一样，SVG也有一些预定义的基本形状可供我们直接使用，这些基本形状称为元素，就像HTML文档中的table元素一样，下面是SVG标准里预先定义好的基本形状元素：矩形<rect>、圆形<circle>、椭圆<ellipse>、直线<line>、折线<polyline>、多边形<polygon>、描绘路径<path> 等。
<line>：通过指定开始点(x1，y1)、结束点(x2，y2)和宽度stroke定义一条直线，语法如下：<line x1="127" y1="65" x2="127" y2="200" style="stroke：rgb(0，0，0)；stroke-width：2"/> 要想得到很细的线，可以指定stroke-width为大于0小于1的数值。
<circle>：在SVG中，要定义一个圆，只需要指顶圆心的坐标、半径即可，也可以使用样式单属性定义外观的样式，语法如下： <circle cx="143" cy="163" r="84" style="fill：rgb(192，192，255)；stroke：rgb(0，0，128)； stroke-width：1"/> 。
<ellipse>：定义椭圆和定义圆很相象，指定圆心，X，Y轴的半径即可： <ellipse cx="160" cy="163" rx="101" ry="81" style="fill：rgb(192，192，255)；stroke：rgb(0，0，128)；stroke-width：1"/> 。
<polygon>：这个标记用来指定连续的点的坐标来，定义多边形。语法如下： <polygon points="223.5，123.034 276，213.966 171，213.966" style="fill：rgb(126，14，83)；stroke：rgb(0，0，128)；stroke-width：1"/> 。
<polyline>：这个标记通过指定各个点的坐标，来定义一条折线，格式如下： <polyline points="100，200 100，20 10，200 100，20" style="stroke:rgb(64，64，64)；stroke-width：1"/> 。
<path> ：是SVG中最复杂的，它创建最复杂的形状，也是最有用、用的最多的，<path d="M10 20 L110 20 L110 120 L10 120" style="fill：rgb(0，0，22)；/> <path>标记的d属性用来描述下面要画的是多类型的形状，M10 20表示画笔移动到点10，20，L110 20表示从当前点画一条线到坐标110，20等，由于path标记采用的格式很复杂，因此，可以画出很复杂的形状。
study url : http://www.w3school.com.cn/svg/svg_rect.asp
分享到：
相关推荐
SVG图形元素的强大之处在于它们可以根据需要进行组合、嵌套和动画化，这使得SVG成为现代Web开发中的重要工具，尤其在响应式设计和交互式用户体验方面。通过掌握这些基本元素及其属性，开发者可以构建出复杂的图形和...
6. **样式和脚本**：SVG图形可以通过CSS进行样式化，也可以使用JavaScript进行交互式编程，实现动态效果和用户交互。 7. **动画**：SVG支持`<animate>`、`<animateTransform>`等元素，可以制作平滑的动画效果。 8....
在描述中的“鼠标hover指定元素时SVG图形变形效果”可能指的是使用CSS的`:hover`伪类来改变这些属性，当鼠标悬停在某个元素上时，触发SVG图形的变化。例如： ```css svg:hover { transform: scale(1.2) rotate(30...
本文将深入探讨如何将SVG图形转换为XAML格式，以及这种转换在WPF和Silverlight项目中的应用。 首先，SVG图形的优势在于其矢量特性，这意味着无论放大多少倍，图形都能保持清晰，不会出现像素化。SVG文件通常包含...
10. **样式表（CSS）**：SVG图形可以通过内联样式或外部样式表应用CSS，实现更高级的样式控制和复用。 在`svg.md`文档中，你可能找到关于这些概念的详细解释和示例代码。而`svg.assets`文件可能包含与教程相关的...
2. **路径编辑**：SVG由路径数据定义，编辑器允许用户直接编辑这些路径，调整锚点和控制点以精确控制图形形状。 3. **文本处理**：SVG可以包含可编辑的文本，编辑器提供了添加、格式化和编辑文本的功能。 4. **...
2. **Python SVG库的使用**：学习如何使用`svgwrite`库创建SVG图形，包括添加形状、设置样式，并将结果保存为SVG文件。 3. **贝塞尔曲线**：掌握贝塞尔曲线的概念和数学原理，它是SVG中创建有机形状的关键。了解...
源码将展示如何创建简单的SVG图形，如线条、矩形和圆形。 2. **CH06 - 基本形状**：此章节深入探讨了SVG中的基本形状元素，如path（路径）、line（线）、polyline（多边形）、polygon（星形或多边形）等。源码会...
- **基本形状**：包括矩形、圆形、椭圆、线条、多边形等。 - **路径**：使用一系列命令来绘制曲线和直线，可以非常灵活地创建复杂的图形。 - **文本**：可以在SVG中加入文字，支持各种字体样式和布局选项。 - **绘制...
通过分析源代码，开发者不仅可以了解SVG图形的创建和操作，还能学习到如何用JavaScript实现图形化配置，这对于提升Web应用的用户体验和交互设计能力大有裨益。此外，对于希望构建自定义流程建模工具的开发者来说，这...
文件s1.svg至s4.svg可能是教程中示例的SVG图形文件，它们展示了上述基本形状的实例。通过查看这些文件，你可以直观地理解每个形状的XML表示方式，并学习如何调整它们的属性以创建自己的SVG图形。 总之，SVG是现代...
在"svg图形应用"这个主题中，我们可以深入探讨以下几个关键知识点： 1. **SVG的基本概念**：了解SVG的语法结构，包括如何定义形状（如矩形、圆形、线条）、路径、文本和渐变等。SVG文件是文本文件，易于阅读和编辑...
在"SVGeneration-master"这个项目中，你可能还会遇到CSS的运用，用于控制SVG图形的样式，如变换、动画效果。CSS3引入了专门针对SVG的属性，如`transform`用于平移、旋转、缩放和倾斜图形，`animation`则可以实现动态...
SVG转CSS：将SVG图形转换为CSS背景图像可以简化代码，降低文件大小，并利于CSS的复用。这通常通过将SVG数据嵌入到CSS的`background-image`属性的`url()`函数中，使用`data:`协议来实现。例如，SVG图形可以被编码为...
在本项目中，"svg图形拖拽变大变小旋转.7z" 是一个包含SVG图形交互功能的压缩包。SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许开发者创建可缩放的、清晰的图形，无论放大多少倍都不会失真。...
"ps图形形状大全"这个压缩包很可能包含了各种常见和不常见的形状资源，方便用户直接在Photoshop中使用。下面将详细探讨Photoshop中的形状工具及其相关知识点。 1. **形状工具介绍** Photoshop的形状工具提供了多种...
1. **形状转换**：Shapeshifter能够将HTML块级元素如div转换为正方形、圆形、星形、心形等15种SVG图形。 2. **填充和描边**：用户可以通过CSS或插件API控制图形的颜色填充和边框样式，实现丰富多彩的效果。 3. **...
这些库提供了丰富的API，用于创建、移动、改变SVG图形的属性，如颜色、大小、位置等，从而创造出各种动态效果。 在“132689892539402283”这个文件名看似随机的文件中，可能包含了HTML、CSS和JavaScript代码，用于...
1. **SVG的基本结构**：SVG图形由`<svg>`标签包裹，内部包含各种图形元素，如`<circle>`（圆形）、`<rect>`（矩形）、`<path>`（路径）、`<polygon>`（多边形）等。SVG图形的属性包括宽度、高度、填充颜色、描边颜色...