SVG DOM通过path绘制五角星

最新推荐文章于 2025-08-17 16:33:56 发布

原创最新推荐文章于 2025-08-17 16:33:56 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

120 篇文章

订阅专栏

该博客通过JavaScript的SVG DOM API，详细介绍了如何在HTML页面中创建SVG元素，并利用path绘制一个五角星。代码示例展示了如何设置SVG的宽高，创建path元素，并通过数学计算确定五角星各个顶点的位置，最终将路径连接闭合。

<!DOCTYPE html>

<html>

<head>

<title>SVG DOM通过path绘制五角星</title>

<style>

#myline{

border: 1px solid red;

width: 100px;

height: 100px;

}

</style>

function createLine(){

var root=document.getElementByIdx_x("myline");

var SVG="http://www.w3.org/2000/svg";

//创建我们的SVG元素

var svg=document_createElement_xNS(SVG,"svg");

svg.setAttribute("width","100");

svg.setAttribute("height","100");

var path2=document_createElement_xNS(SVG,"path");

for(var i=0;i<10;i+=2){

var x=Math.sin(Math.PI*2/5*i)*50+50;

var y=Math.cos(Math.PI*2/5*i)*50+50;

var p=(i==0)?

path2.createSVGPathSegMovetoAbs(x,y):

path2.createSVGPathSegLinetoAbs(x,y);

path2.pathSegList.appendItem(p);

}

//关闭path2

path2.pathSegList.appendItem(path2.createSVGPathSegClosePath());

svg.a(path2);

root.a(svg);

}

</script>

</head>

<h4>SVG DOM通过path绘制五角星</h4>

</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

战略观察者

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

用SVG制作沿路动画五角星

LEE1996JUN的博客

03-20

1319

<!DOCTYPE html> <head> <title>无标题文档</title> <link href="images/Untitled-2.css" type="text/css" rel="stylesheet"> </head> <body>

SVG---矢量正五角星(喜迎国庆)

苛性钠的博客

09-28

1034

绘制矢量正三角形算法图解：图形分析： 1.正五角星来自正五边形，正五边形的边长相等且每个角为108度 2.在运算过程中某些角度通过等腰三角形结合定角108度计算出36度 3.坐标垂直形成直角三角形，可以计算出54度的角 4.同样的，等腰三角形腰与第三边形成的夹角度数相同，计算差值得到18度的角补充三角函数：直角三角形内：除了直角 sin某角度等于这个角度的对边长度/斜边边长； cos某角度等于这个角度的邻边长度/斜边边长；以上数学问题，若有不懂，请回炉重造。。。代码分析： <svg

参与评论您还未登录，请先登录后发表或查看评论

HTML5的SVG画个五角星

莉兹Liz的博客

04-15

991

使用HTML5的SVG画个五角星，W3C SVG 五角星改的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head&gt

Svg五角星、太阳花、多边形的绘制

eaziyytt的专栏

03-01

2339

我们在学习平面几何中，学到了多边形的概念，有多少条边就有多少个顶点。本篇我们介绍一下如何用svg来绘制规则的多边形，比如三角形、五角星和任意多边形。在此，我们用到polygon标签，<polygon> 标签用来创建含有不少于三个边的图形。多边形的绘制最关键的是各个顶点的确定，确定各个顶点后只要将顶点之间连线就可以得到多边形，当然，顶点间的连线顺序不同，得到的图形也不同，如下面的5顶点的图形：第一张图形，只要计算出指定圆的边上的顶点，顺序连线就可以得到，而第二张图形在第一张图形的基础上

HTML 五角星 -- SVG

随遇而安的博客

02-21

8310

在HTML页面中显示五角星。

HTML5 SVG五角星圆点背景特效

06-24

五角星通常通过路径（`<path>`）元素来绘制，通过精确控制线条的起点、终点和转折点，可以形成五角星的形状。圆点则可能通过圆形（`<circle>`）或圆点（`<use>`）元素实现，通过调整半径、填充色等属性，可以创建出...

精选资源

dom-to-svg:用于将给定HTML DOM节点转换为可访问的SVG“屏幕截图”的库

03-16

DOM到SVG 用于将给定HTML DOM节点转换为可访问的SVG“屏幕截图”的库。演示版 :camera_with_flash: 试用，该使用此库可让您获取任何网页的SVG屏幕截图。您可以在找到源代码。用法 import { documentToSVG , ...

HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍

09-28

由于SVG是html的元素，所以支持普通的DOM操作，又由于SVG本质上是xml文档，所以也有一种特殊的DOM操作，大多称之为SVG DOM,本文将详细介绍下SVG中的DOM操作，感兴趣的朋友可不要错过哦

精选资源

svg-pathdata:解析SVG PathDatas

04-02

svg-pathdata 简单有效地处理SVG路径数据（path [d]属性内容）。用法安装模块： npm install --save svg-pathdata 或将添加到HTML中的脚本中。然后在您JavaScript文件中： const { SVGPathData , ...

svg之path

涛哥~梦

01-02

739

添加链接描述

js 绘制五角星

sun

03-22

4018

var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); //设置是个顶点的坐标，根据顶点制定路径 for (var i = 0; i < 5; i++) { ...

学习SVG（六）路径 - ＜path＞

小小的前端

07-21

3835

path

评价打分组件，SVG 半颗星的解决方案！

粉丝们务必加入微信粉丝群

09-22

1392

作者：KUMAR HARSH 译者：前端小智来源：blog 有梦想，有干货，微信搜索【大迁世界】关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。对于一个内容服务的网站来说评价打分也是很重要的一部分，它有利于分析用户对我们的内容的喜好程序。最近，我们团需要为一个项目实现一个星级评价的组件，需求如下：性能(不能用图片) 可调整的大小可访问性小数位打分.

（十六）SVG

孤独灬啸月

08-17

1294

用svg的折线（polyline）绘制一颗五角星

Bohn的博客

09-01

3004

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <svg widt

svg 2

IT00123的博客

07-18

320

渐变

HTML5与SVG实现星级评分动画特效教程

SVG&nbsp;DOM通过path绘制五角星

SVG DOM通过path绘制五角星