Draw a check mark inside the rect tag in svg using js
Question
I have created a small rect using js and svg, here is the code for it:
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>
and 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);
and here is the jsfiddle.
I want to add a check mark inside the rectangle, the check mark looks like:
How am I supposed to do this?
2 answers
solution1
4 ACCPTED 2015-07-13 10:11:44
You can use the svg path element to crate your check mark. The tricky part about the path element is the d attribute, which will describe the path combining several instructions. Here is some good information on how the d attribute works.
Take a look at the example and i'm sure you will get the idea.
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>
solution2
0 2017-06-01 20:13:41
When I executed the web page I got the error: Uncaught TypeError: Cannot read property 'appendChild' of null at: document.getElementById('svgOne').appendChild(group);
So I rearranged stuff according to what I learned from: Saved from: https://www.sitepoint.com/community/t/creating-a-svg-element/5929/
ADDED: <title> in the <head> (not important at all).
MOVED: </head> to just after the <title> .
MOVED: <body> and <h2> to just after </head> .
ADDED: <div id="container"/> to <body> . //Will contain all of the SVG content.
NOTE: At this point, the container has been added to the <body> and the <script> is now positioned INSIDE the <body> .
DELETED the original SVG element from the : => <svg id="svgOne" xmlns="http://www.w3.org/2000/svg" width="500" height="300"> </svg> .
ADDED the creation of a new SVG element in the <script> :
var svg = document.createElementNS(svgns, "svg"); //Create an svg tag in SVG's namespace
svg.setAttribute("width", "300");
svg.setAttribute("height", "400");
DELETED the original appendChild(group): => document.getElementById('svgOne').appendChild(group);
REPLACED it with the new appendChild(group):=>
svg.appendChild(group);
DELETED the original appendChild(checkMarkCopy): => document.getElementById('svgOne').appendChild(checkMarkCopy);
REPLACED it with the new appendChild(checkMarkCopy):=>
svg.appendChild(checkMarkCopy);
ADDED: => document.getElementById("container").appendChild(svg);
This worked in Chrome Version 58.0.3029.110. In the Chrome console, the framework looks like: Framework of web page.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.