您的位置:58脚本 > svg圆形进度条 SVG 圆形

svg圆形进度条 SVG 圆形

2023-03-18 19:32 SVG教程

svg圆形进度条 SVG 圆形

svg圆形进度条

SVG圆形进度条是一种常见的用于显示进度的图形,它可以用来表示任何进度,例如下载进度、投票进度、游戏进度等。它通常由一个圆形和一个圆弧组成,其中圆弧表示当前的进度。

使用SVG制作圆形进度条非常容易,只需要使用SVG的circle和path元素即可。circle元素用于制作圆形,而path元素则用于制作圆弧。下面是一段代码:

<svg width="200" height="200"> 
  <circle cx="100" cy="100" r="90" fill="#f2f2f2"/> 
  <path d="M 100,100 L 100,10 A 90,90 0 0,1 190,100 z" fill="#00bcd4"/> 
</svg> 

上面的代码中,circle元素用于制作背景圆形,而path元素则用于制作前景圆弧。cx和cy属性表示圆心的位置(x和y坐标),r表示半径大小。d属性表示路径数据(M表示起始位置、L表示直接直至、A表示弧形、z表示闭合)。fill属性表明要使用什么颜色来填充图形。

要想加上功能性的话可以使用JavaScript来实时改变path元素中d属性的数据以实时改变图形的外观。例如可以根据不同的数字来加上不同大小的弧度或者根据不同颜色来加上不同颜色的图形。

SVG 圆形

SVG <circle>

通过 <circle> 可以绘制一个圆形,它只有3个属性用来设置圆形。

SVG 圆形 - <circle>

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

下面是SVG代码:

实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。

代码解析:

  • cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为(0, 0)
  • r属性定义圆的半径
阅读全文
以上是58脚本为你收集整理的svg圆形进度条 SVG 圆形全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
  •  XSL-FO table-cell 对象

    XSL-FO table-cell 对象

    XSL-FO table-cell 对象XSL-FO 参考手册定义和用法 fo:table-cell 对象是一个包含表格单元格内容的容器。语法fo:table-cell!--Co...

  •  XML Schema element 元素

    XML Schema element 元素

    XML Schema element 元素 完整 XML Schema 参考手册定义和用法 element 元素定义一个元素。 元素信息 父元素: schema, choice, ...

  •  XML Schema simpleContent 元素

    XML Schema simpleContent 元素

    XML Schema simpleContent 元素 完整 XML Schema 参考手册定义和用法 simpleContent 元素包含对 complexType 元素(它以字符数据...

  •  XML Schema notation 元素

    XML Schema notation 元素

    XML Schema notation 元素 完整 XML Schema 参考手册 定义和用法 notation 元素描述 XML 文档中非 XML 数据的格式。 元素信息 父...

  •  XQuery 术语

    XQuery 术语

    XQuery 术语 在 XQuery 中,节点是它的一个术语,本节将为你介绍这个术语。在 XQuery 中,有七种节点:元素、属性、文本、命名空...

  •  XSLT <xsl:output> 元素

    XSLT <xsl:output> 元素

    XSLT xsl:output 元素XSLTxsl:output元素用于定义文档的输出格式,请参考本节中的实例。 完整的 XSLT 元素参考手册定义和用法 xs...

  •  DTD 实体

    DTD 实体

    DTD - 实体 本节介绍 DTD 中的实体声明,在 DTD 中进行实体声明的时候,将使用ENTITY 关键字来声明。实体是用于定义引用普通文本...

  •  XPath 节点

    XPath 节点

    XPath 节点 本节为你介绍 XPath 中节点的相关知识,主要介绍了 XPath 节点的关系。XPath 术语 节点 在 XPath 中,有七种类型的节...

  • xml dom XML DOM baseURI 属性

    xml dom XML DOM baseURI 属性

    XML DOM baseURI 属性 Element 对象定义和用法 baseURI 属性返回 xml 文档的位置(URI)。 语法elementNode.baseURI 实例 下面的...

  •  XML DOM compareDocumentPosition() 方法

    XML DOM compareDocumentPosition() 方法

    XML DOM compareDocumentPosition() 方法 Element 对象定义和用法 compareDocumentPosition() 方法根据文档顺序比较当前节点与指...

© 2024 58脚本 58jiaoben.com 版权所有 联系我们
桂ICP备12005667号-28 Powered by CMS