Question

我使用js和svg创建了一个小矩形，下面是代码：

HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>

<svg id="svgOne" xmlns="http://www.w3.org/2000/svg" width="5000" height="3000"> 
</svg>
</body>
</html>

和js：

var svgns = "http://www.w3.org/2000/svg";
    var x = 50,
        y = 30;

var rect = document.createElementNS(svgns, 'rect');
rect.setAttributeNS(null, 'x', x);
rect.setAttributeNS(null, 'y', y);
rect.setAttributeNS(null, 'height', '50');
rect.setAttributeNS(null, 'width', '50');
rect.setAttributeNS(null, 'fill', 'grey');
document.getElementById('svgOne').appendChild(rect);

和here是jsfiddle。

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

enter image description here

我该怎么做？

Answer 1

您可以使用svg path元素来设置复选标记。关于path元素的棘手部分是d属性，它将描述组合多个指令的路径。 Here是关于d属性如何运作的一些很好的信息。

看看这个例子，我相信你会明白这个想法。

var svgns = "http://www.w3.org/2000/svg";
var x = 50,
    y = 30;

// create group element
var group = document.createElementNS(svgns, 'g');
var rect = document.createElementNS(svgns, 'rect');
// create the path element
var checkMark = document.createElementNS(svgns, 'path');

// set group position
group.setAttributeNS(null, 'transform', 'translate('+ x + ', '+ y + ')');

rect.setAttributeNS(null, 'height', '50');
rect.setAttributeNS(null, 'width', '50');
rect.setAttributeNS(null, 'fill', 'grey');
// set path attributes
checkMark.setAttributeNS(null, 'd', 'M7.375,33.25 c0,0,10,11.375,14.125,11.375S44.875,8,44.875,8');
checkMark.setAttributeNS(null, 'fill', 'none');
checkMark.setAttributeNS(null, 'stroke-linecap', 'round');
checkMark.setAttributeNS(null, 'style', 'stroke:rgb(255,255,255);stroke-width:6');

// append elements to group
group.appendChild(rect);
group.appendChild(checkMark);
// append group to svg
document.getElementById('svgOne').appendChild(group);

// clone your checkmark
var checkMarkCopy = group.cloneNode(true);
checkMarkCopy.setAttributeNS(null, 'transform', 'translate(100, 100)');
document.getElementById('svgOne').appendChild(checkMarkCopy);

<svg id="svgOne" xmlns="http://www.w3.org/2000/svg" width="5000" height="3000"></svg>

Answer 2

当我执行网页时，我收到了错误：未捕获的TypeError：无法读取属性＆quot; appendChild＆＃39;为null at：document.getElementById（＆＃39; svgOne＆＃39;）。appendChild（group）;

所以我根据我从中学到的东西重新排列了东西：保存自：https://www.sitepoint.com/community/t/creating-a-svg-element/5929/

在<title>中添加<head>（根本不重要）。

MOVED：</head>就在<title>之后。

MOVED：<body>和<h2>就在</head>之后。

ADDED：<div id="container"/>至<body>。 //将包含所有SVG内容。

注意：此时，容器已添加到<body>，<script>现在位于<body>内。

从：=＆gt;删除原始SVG元素<svg id="svgOne" xmlns="http://www.w3.org/2000/svg" width="500" height="300"> </svg>。

在<script>：

中添加了新SVG元素的创建

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

删除原来的appendChild（group）：=＆gt; document.getElementById('svgOne').appendChild(group);

使用新的appendChild（group）替换它：=＆gt;

svg.appendChild(group);

删除原来的appendChild（checkMarkCopy）：=＆gt; document.getElementById('svgOne').appendChild(checkMarkCopy);

用新的appendChild（checkMarkCopy）替换它：=＆gt;

svg.appendChild(checkMarkCopy);

ADDED：=＆gt; document.getElementById("container").appendChild(svg);

这适用于Chrome版本58.0.3029.110。在Chrome控制台中，框架如下所示： Framework of web page.

使用js在svg中的rect标记内绘制一个复选标记

2 个答案: