Javascript 使用js在svg中的rect标记内画一个复选标记

我已经使用js和svg创建了一个小rect，下面是它的代码：

Html:

这就是JSFIDLE

我想在矩形内添加一个复选标记，该复选标记如下所示：

我该怎么做呢？

您可以使用svg path元素来包装您的复选标记。关于path元素的棘手部分是d属性，它将结合几个指令来描述路径。是关于d属性如何工作的一些好信息

看看这个例子，我相信你会明白的

var svgns=http://www.w3.org/2000/svg; var x=50， y=30； //创建组元素 var group=document.createElementNSsvgns，“g”； var rect=document.createElementNSsvgns，“rect”； //创建路径元素 var checkMark=document.createElementNSsvgns，“路径”； //设置组位置 group.setAttributesNull，'transform'，'translate'+x+'，'+y+； rect.setAttributesNull，'height'，'50'； rect.setAttributesNull，'width'，'50'； rect.setAttributesNull，'fill'，'grey'； //设置路径属性 checkMark.setAttributesNull，“d”，“M7.375,33.25 c0,0,10,11.375,14.125,11.375S44.875,8,44.875,8'； checkMark.setAttributesNull，'fill'，'none'； checkMark.setAttributesNull，'stroke linecap'，'round'； checkMark.setAttributesNull，'style'，'stroke:rgb255255255；笔画宽度：6’； //将元素附加到组 group.appendChildrect； 组。复选标记； //将组附加到svg getElementById'svgOne'。appendChildgroup； //克隆你的复选标记 var checkMarkCopy=group.cloneNodetrue； checkMarkCopy.setAttributesNull，'transform'，'translate100100'； document.getElementById'svgOne'。appendChildcheckMarkCopy；

---

当我执行网页时，我得到了一个错误： 未捕获的TypeError:无法读取null的属性“appendChild” 在：document.getElementById'svgOne'.appendChildgroup

所以我根据我从中学到的东西重新安排了东西： 保存自：

补充说：在这个问题上根本不重要

搬家：刚过马路

搬家了：就在那之后

加：至//将包含所有SVG内容

注意：此时，容器已添加到中，现在位于中

已从中删除原始SVG元素：=>

在中添加了新SVG元素的创建：

删除了原始appendChildgroup:=>document.getElementById'svgOne'。appendChildgroup

将其替换为新的appendChildgroup:=>

svg.appendChild(group);

删除了原始appendChildcheckMarkCopy:=>document.getElementById'svgOne'。appendChildcheckMarkCopy

将其替换为新的appendChildcheckMarkCopy:=>

svg.appendChild(checkMarkCopy);

新增：=>document.getElementByIdcontainer.appendChildsvg

这在Chrome版本58.0.3029.110中有效。 在Chrome控制台中，框架如下所示：

---

画一个类似于复选标记的图标？@FelixKling:不确定路径和我知道的svg内容您可以单击我上一条评论中的链接了解更多关于路径的信息。。。这是一个教程。或者在Inkscape或svg edit中绘制复选标记，然后查看它创建了什么标记。为什么要自己用代码绘制它？如果只是有一个自定义复选框，那么最好从预先设计的文件加载SVG，然后根据需要隐藏并显示复选标记。谢谢，现在我该如何对它们进行分组？意思是说，假设我创建了许多矩形，我不想复制我的路径。相反，将矩形和路径组合在一起，这样我可以复制这个组并将其移动到其他x，y坐标。我对我的答案进行了编辑，添加了一个组元素。谢谢，假设我想在不同的x，y轴上创建它们的克隆，我应该如何在js中做到这一点？

var svg = document.createElementNS(svgns, "svg"); //Create an svg tag in SVG's namespace
svg.setAttribute("width", "300");
svg.setAttribute("height", "400");

svg.appendChild(group);

svg.appendChild(checkMarkCopy);