`
sungang_1120
  • 浏览: 323587 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类

SVG 形状学习之——SVG圆形

阅读更多

 

<circle> 标签可用来创建一个圆。

 

<circle> 标签

<circle> 标签可用来创建一个圆。

请把下面的代码拷贝到记事本,然后把文件保存为 "circle1.svg"。把此文件放入您的web目录:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

 

 

 

代码解释:

cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy,圆的中心会被设置为 (0, 0)

r 属性定义圆的半径。

 

  • 大小: 8.1 KB
分享到:
评论

相关推荐

    save-ps-to-svg 1.0.zip

    “save-ps-to-svg 1.0”脚本是专为解决这个问题设计的,它允许用户将PS中的形状图层(如矩形、圆形、多边形等)导出为SVG格式,保留其矢量特性。这个脚本的出现,大大提高了设计师的工作效率,减少了手动转格式的...

    SVG矢量图语言学习资料(pdf)

    这个压缩包包含了两份关于SVG矢量图语言的学习资料——"svg1.pdf"和"svg2.pdf",它们很可能是深入讲解SVG语法、特性和应用的教程。 SVG的基本概念: 1. **矢量图形**:与位图图形(像素图)不同,矢量图由线条、...

    HTML5 SVG可爱的笑脸动画特效

    1. **SVG元素**:SVG由一系列基本形状元素组成,如`&lt;rect&gt;`(矩形)、`&lt;circle&gt;`(圆形)、`&lt;ellipse&gt;`(椭圆)、`&lt;line&gt;`(线条)、`&lt;polygon&gt;`(多边形)和`&lt;path&gt;`(路径)。这些元素可以组合起来构建复杂的图形...

    HTML5 SVG绘制大树.rar

    SVG的基本结构由一系列的图形元素组成,如`&lt;rect&gt;`(矩形)、`&lt;circle&gt;`(圆形)、`&lt;path&gt;`(路径)等。在这个案例中,可能使用了`&lt;path&gt;`元素来绘制复杂的树枝和树叶形状,通过调整路径数据来模拟大树的生长过程。 ...

    Go-生SVG的Go语言库

    **Go语言SVG库——svgo详解** 在Go语言的生态系统中,`svgo`是一个非常重要的库,专门用于生成SVG(Scalable Vector Graphics)格式的图像。SVG是一种基于XML的矢量图形标准,它允许开发者创建出清晰、可缩放的图形...

    网页模板——TweenMax.js+svg实现漂亮的农场风车风景动画效果源码.zip

    SVG 图形由简单的形状组成,如直线、曲线、圆形等,这使得它们非常适合用于创建复杂的设计和动画。SVG 图形在网页中可以直接嵌入,也可以通过 CSS 或 JavaScript 控制。当与 JavaScript 库如 TweenMax.js 配合时,...

    html5 svg动画天气预报图标特效

    这些元素可能包括圆形、矩形、路径等基本形状,通过组合、变换和填充来形成特定的天气图案。例如,下雨图标可能由云朵和落下的雨滴组成,而晴天图标则可能包含一个太阳和几朵飘动的白云。 HTML5的引入,特别是其对...

    SVG参考文档 可伸缩向量图形

    5. **动画**:SVG支持两种动画机制——SMIL(Synchronized Multimedia Integration Language)和JavaScript API,可以改变图形的属性如位置、大小、颜色等,实现平滑过渡和交互效果。 6. **滤镜和效果**:SVG可以...

    SVG实例-可交互式中国地图

    它由一系列的几何形状(如线条、曲线、圆形、矩形等)和文本组成,这些元素可以通过编程方式操纵。SVG文件是文本文件,因此易于阅读、编辑和搜索。 在本实例中,"SVG实例-可交互式中国地图"可能是通过使用SVG的路径...

    网页模板——TweenMax + SVG 实现手提式录音机点击播放音乐动画效果源码.zip

    1. **SVG图形元素**:首先,你需要了解如何使用SVG创建手提录音机的形状,如矩形、圆形、线条等,通过`&lt;path&gt;`、`&lt;rect&gt;`、`&lt;circle&gt;`等标签来定义各个部分。 2. **CSS样式**:CSS用于对SVG元素进行基本的样式设置...

    html5使用svg绘制的笑脸动画特效源码.zip

    HTML5是一种强大的网页开发技术,它为网页开发者提供了丰富的功能和接口,其中之一就是SVG(Scalable Vector Graphics)——可缩放矢量图形。SVG是一种基于XML的图像格式,允许在网页上创建和显示复杂的矢量图形。在...

    html5 svg打开圣诞礼盒和下雪动画特效源码.zip

    下雪的动画特效可能通过创建多个小的SVG元素(如圆形或多边形),然后用JavaScript定时调整它们的位置和透明度,模拟雪花飘落的效果。此外,CSS也可能用于添加过渡和动画效果,增强视觉体验。 开发者可能会使用...

    SVG剪裁路径和遮罩jQuery幻灯片特效.zip

    在本项目中,“SVG剪裁路径和遮罩jQuery幻灯片特效”利用了SVG的两个核心特性——剪裁路径(clip-path)和遮罩(mask),结合jQuery库来实现动态、交互式的幻灯片展示效果。 1. **SVG剪裁路径(clip-path)**: ...

    HTML5+SVG turbulence实现的水中月(水面倒影)动画特效源码.zip

    接下来,我们要创建月亮的SVG形状。这通常是一个圆形或者椭圆形,可以通过`&lt;circle&gt;`或`&lt;ellipse&gt;`标签实现。月亮的位置、大小和颜色都可以通过属性来调整。为了实现倒影,我们可以复制月亮图形,并将其翻转,位置稍...

    css3使用svg实现天气预报图标动画特效源码.zip

    它极大地扩展了其前身CSS2的功能,提供了更多丰富的样式控制,其中包括对矢量图形——SVG(Scalable Vector Graphics)的直接支持以及更强大的动画功能。这个压缩包"css3使用svg实现天气预报图标动画特效源码.zip...

    css3 svg实现的情人节表白鲜花动画特效源码.zip

    本项目——“css3 svg实现的情人节表白鲜花动画特效源码”,正是这一技术巧妙运用的体现。通过深入解析此源码,我们可以学习到如何利用CSS3的动画功能和SVG的矢量特性,打造一款浪漫而富有创意的情人节表白动画。 ...

    CSS3 SVG星巴克咖啡杯特效.zip

    例如,SVG的`&lt;circle&gt;`、`&lt;path&gt;`和`&lt;rect&gt;`元素可以分别用于创建圆形、曲线和矩形形状,精确地模拟咖啡杯的外观。 CSS3在此特效中的作用主要体现在动画和过渡效果上。通过`@keyframes`规则,我们可以定义一个动画...

    SVG灯泡发光特效特效代码

    在这个案例中,灯泡可能是一个`&lt;svg&gt;`元素,包含着描述灯泡形状的路径(`&lt;path&gt;`)、圆形(`&lt;circle&gt;`)或其他几何形状。当鼠标悬停时,通过JavaScript或CSS的`:hover`伪类改变这些元素的样式,实现发光效果。 除了...

    Editeur SVG-开源

    1. **对象创建**:用户可以通过工具栏创建各种形状,如矩形、圆形、线条、曲线等,这些都是基于SVG标准的矢量对象。 2. **Bezier曲线编辑**:提供贝塞尔曲线编辑工具,这是一种强大的路径创建方式,能够创建平滑、...

    Teino1978-Corp-circle-pack-to-fill-any-SVG-shape

    本文将探讨一个独特的技术——"Teino1978-Corp-circle-pack-to-fill-any-SVG-shape",它使用JavaScript来创建一个圆圈包装算法,能够动态地填充任何SVG形状。这种方法不仅视觉效果独特,而且可以应用于各种互动式...

Global site tag (gtag.js) - Google Analytics