On click automatically draw rectangle on the SVG Map
up vote
-1
down vote
favorite
I tried an example of drawing circle in SVG map but i want to draw rectangle and i am unable to do it.
My task is to select one of the rectangle of particular shape from left panel and goto map and then click wherever i want. On cursor click rectangle should be created. There are different size of rectangle on left panel of my website like 3x3, 3x6, 6x6 etc.
below is the example
var
svg = document.getElementById('mysvg'),
NS = svg.getAttribute('xmlns'),
local = svg.getElementById('local'),
coords = document.getElementById('coords');
// add a circle to the SVG
svg.addEventListener('click', function(e) {
var
t = e.target,
x = e.clientX,
y = e.clientY,
target = (t == svg ? svg : t.parentNode),
svgP = svgPoint(target, x, y),
circle = document.createElementNS(NS, 'circle');
circle.setAttributeNS(null, 'cx', Math.round(svgP.x));
circle.setAttributeNS(null, 'cy', Math.round(svgP.y));
circle.setAttributeNS(null, 'r', 10);
target.appendChild(circle);
}, false);
// translate page to SVG co-ordinate
function svgPoint(element, x, y) {
var pt = svg.createSVGPoint();
pt.x = x;
pt.y = y;
return pt.matrixTransform(element.getScreenCTM().inverse());
}*, *:before, *:after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
font-family: Lato, sans-serif;
font-size: 100%;
padding: 0;
margin: 10px;
color: #444;
background-color: #fff;
overflow: hidden;
}
svg {
background: radial-gradient(ellipse at center, #fefefe 0%, #cbeeff 100%);
}
rect {
fill: #006da1;
}
circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
p {
position: absolute;
right: 5px;
bottom: 5px;
padding: 3px 6px;
background-color: rgba(255,255,255,0.8);
}<html>
<head>
</head>
<body>
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1600 800" preserveAspectRatio="xMidYMid meet">
<g id="local" transform="scale(4)">
<rect x="50" y="50" width="100" height="100" />
</g>
</svg>
</body>
</html>javascript svg
asked 23 mins ago
Sana Khan
11
New contributor
Sana Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
-1
down vote
favorite
I tried an example of drawing circle in SVG map but i want to draw rectangle and i am unable to do it.
My task is to select one of the rectangle of particular shape from left panel and goto map and then click wherever i want. On cursor click rectangle should be created. There are different size of rectangle on left panel of my website like 3x3, 3x6, 6x6 etc.
below is the example
var
svg = document.getElementById('mysvg'),
NS = svg.getAttribute('xmlns'),
local = svg.getElementById('local'),
coords = document.getElementById('coords');
// add a circle to the SVG
svg.addEventListener('click', function(e) {
var
t = e.target,
x = e.clientX,
y = e.clientY,
target = (t == svg ? svg : t.parentNode),
svgP = svgPoint(target, x, y),
circle = document.createElementNS(NS, 'circle');
circle.setAttributeNS(null, 'cx', Math.round(svgP.x));
circle.setAttributeNS(null, 'cy', Math.round(svgP.y));
circle.setAttributeNS(null, 'r', 10);
target.appendChild(circle);
}, false);
// translate page to SVG co-ordinate
function svgPoint(element, x, y) {
var pt = svg.createSVGPoint();
pt.x = x;
pt.y = y;
return pt.matrixTransform(element.getScreenCTM().inverse());
}*, *:before, *:after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
font-family: Lato, sans-serif;
font-size: 100%;
padding: 0;
margin: 10px;
color: #444;
background-color: #fff;
overflow: hidden;
}
svg {
background: radial-gradient(ellipse at center, #fefefe 0%, #cbeeff 100%);
}
rect {
fill: #006da1;
}
circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
p {
position: absolute;
right: 5px;
bottom: 5px;
padding: 3px 6px;
background-color: rgba(255,255,255,0.8);
}<html>
<head>
</head>
<body>
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1600 800" preserveAspectRatio="xMidYMid meet">
<g id="local" transform="scale(4)">
<rect x="50" y="50" width="100" height="100" />
</g>
</svg>
</body>
</html>javascript svg
asked 23 mins ago
Sana Khan
11
New contributor
Sana Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Welcome to Code Review. I'm afraid this question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information.
– Heslacher
19 mins ago
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
I tried an example of drawing circle in SVG map but i want to draw rectangle and i am unable to do it.
My task is to select one of the rectangle of particular shape from left panel and goto map and then click wherever i want. On cursor click rectangle should be created. There are different size of rectangle on left panel of my website like 3x3, 3x6, 6x6 etc.
below is the example
var
svg = document.getElementById('mysvg'),
NS = svg.getAttribute('xmlns'),
local = svg.getElementById('local'),
coords = document.getElementById('coords');
// add a circle to the SVG
svg.addEventListener('click', function(e) {
var
t = e.target,
x = e.clientX,
y = e.clientY,
target = (t == svg ? svg : t.parentNode),
svgP = svgPoint(target, x, y),
circle = document.createElementNS(NS, 'circle');
circle.setAttributeNS(null, 'cx', Math.round(svgP.x));
circle.setAttributeNS(null, 'cy', Math.round(svgP.y));
circle.setAttributeNS(null, 'r', 10);
target.appendChild(circle);
}, false);
// translate page to SVG co-ordinate
function svgPoint(element, x, y) {
var pt = svg.createSVGPoint();
pt.x = x;
pt.y = y;
return pt.matrixTransform(element.getScreenCTM().inverse());
}*, *:before, *:after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
font-family: Lato, sans-serif;
font-size: 100%;
padding: 0;
margin: 10px;
color: #444;
background-color: #fff;
overflow: hidden;
}
svg {
background: radial-gradient(ellipse at center, #fefefe 0%, #cbeeff 100%);
}
rect {
fill: #006da1;
}
circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
p {
position: absolute;
right: 5px;
bottom: 5px;
padding: 3px 6px;
background-color: rgba(255,255,255,0.8);
}<html>
<head>
</head>
<body>
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1600 800" preserveAspectRatio="xMidYMid meet">
<g id="local" transform="scale(4)">
<rect x="50" y="50" width="100" height="100" />
</g>
</svg>
</body>
</html>javascript svg
asked 23 mins ago
Sana Khan
11
New contributor
Sana Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I tried an example of drawing circle in SVG map but i want to draw rectangle and i am unable to do it.
My task is to select one of the rectangle of particular shape from left panel and goto map and then click wherever i want. On cursor click rectangle should be created. There are different size of rectangle on left panel of my website like 3x3, 3x6, 6x6 etc.
below is the example
var
svg = document.getElementById('mysvg'),
NS = svg.getAttribute('xmlns'),
local = svg.getElementById('local'),
coords = document.getElementById('coords');
// add a circle to the SVG
svg.addEventListener('click', function(e) {
var
t = e.target,
x = e.clientX,
y = e.clientY,
target = (t == svg ? svg : t.parentNode),
svgP = svgPoint(target, x, y),
circle = document.createElementNS(NS, 'circle');
circle.setAttributeNS(null, 'cx', Math.round(svgP.x));
circle.setAttributeNS(null, 'cy', Math.round(svgP.y));
circle.setAttributeNS(null, 'r', 10);
target.appendChild(circle);
}, false);
// translate page to SVG co-ordinate
function svgPoint(element, x, y) {
var pt = svg.createSVGPoint();
pt.x = x;
pt.y = y;
return pt.matrixTransform(element.getScreenCTM().inverse());
}*, *:before, *:after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
font-family: Lato, sans-serif;
font-size: 100%;
padding: 0;
margin: 10px;
color: #444;
background-color: #fff;
overflow: hidden;
}
svg {
background: radial-gradient(ellipse at center, #fefefe 0%, #cbeeff 100%);
}
rect {
fill: #006da1;
}
circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
p {
position: absolute;
right: 5px;
bottom: 5px;
padding: 3px 6px;
background-color: rgba(255,255,255,0.8);
}<html>
<head>
</head>
<body>
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1600 800" preserveAspectRatio="xMidYMid meet">
<g id="local" transform="scale(4)">
<rect x="50" y="50" width="100" height="100" />
</g>
</svg>
</body>
</html>var
svg = document.getElementById('mysvg'),
NS = svg.getAttribute('xmlns'),
local = svg.getElementById('local'),
coords = document.getElementById('coords');
// add a circle to the SVG
svg.addEventListener('click', function(e) {
var
t = e.target,
x = e.clientX,
y = e.clientY,
target = (t == svg ? svg : t.parentNode),
svgP = svgPoint(target, x, y),
circle = document.createElementNS(NS, 'circle');
circle.setAttributeNS(null, 'cx', Math.round(svgP.x));
circle.setAttributeNS(null, 'cy', Math.round(svgP.y));
circle.setAttributeNS(null, 'r', 10);
target.appendChild(circle);
}, false);
// translate page to SVG co-ordinate
function svgPoint(element, x, y) {
var pt = svg.createSVGPoint();
pt.x = x;
pt.y = y;
return pt.matrixTransform(element.getScreenCTM().inverse());
}*, *:before, *:after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
font-family: Lato, sans-serif;
font-size: 100%;
padding: 0;
margin: 10px;
color: #444;
background-color: #fff;
overflow: hidden;
}
svg {
background: radial-gradient(ellipse at center, #fefefe 0%, #cbeeff 100%);
}
rect {
fill: #006da1;
}
circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
p {
position: absolute;
right: 5px;
bottom: 5px;
padding: 3px 6px;
background-color: rgba(255,255,255,0.8);
}<html>
<head>
</head>
<body>
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1600 800" preserveAspectRatio="xMidYMid meet">
<g id="local" transform="scale(4)">
<rect x="50" y="50" width="100" height="100" />
</g>
</svg>
</body>
</html>var
svg = document.getElementById('mysvg'),
NS = svg.getAttribute('xmlns'),
local = svg.getElementById('local'),
coords = document.getElementById('coords');
// add a circle to the SVG
svg.addEventListener('click', function(e) {
var
t = e.target,
x = e.clientX,
y = e.clientY,
target = (t == svg ? svg : t.parentNode),
svgP = svgPoint(target, x, y),
circle = document.createElementNS(NS, 'circle');
circle.setAttributeNS(null, 'cx', Math.round(svgP.x));
circle.setAttributeNS(null, 'cy', Math.round(svgP.y));
circle.setAttributeNS(null, 'r', 10);
target.appendChild(circle);
}, false);
// translate page to SVG co-ordinate
function svgPoint(element, x, y) {
var pt = svg.createSVGPoint();
pt.x = x;
pt.y = y;
return pt.matrixTransform(element.getScreenCTM().inverse());
}*, *:before, *:after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
font-family: Lato, sans-serif;
font-size: 100%;
padding: 0;
margin: 10px;
color: #444;
background-color: #fff;
overflow: hidden;
}
svg {
background: radial-gradient(ellipse at center, #fefefe 0%, #cbeeff 100%);
}
rect {
fill: #006da1;
}
circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
p {
position: absolute;
right: 5px;
bottom: 5px;
padding: 3px 6px;
background-color: rgba(255,255,255,0.8);
}<html>
<head>
</head>
<body>
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1600 800" preserveAspectRatio="xMidYMid meet">
<g id="local" transform="scale(4)">
<rect x="50" y="50" width="100" height="100" />
</g>
</svg>
</body>
</html>javascript svg
javascript svg
asked 23 mins ago
Sana Khan
11
New contributor
Sana Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 23 mins ago
Sana Khan
11
New contributor
Sana Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 18 mins ago
asked 23 mins ago
Sana Khan
11
New contributor
Sana Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 23 mins ago
Sana Khan
11
asked 23 mins ago
Sana Khan
11
11
New contributor
Sana Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Sana Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Sana Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Welcome to Code Review. I'm afraid this question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information.
– Heslacher
19 mins ago
add a comment |
Welcome to Code Review. I'm afraid this question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information.
– Heslacher
19 mins ago
Welcome to Code Review. I'm afraid this question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information.
– Heslacher
19 mins ago
Welcome to Code Review. I'm afraid this question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information.
– Heslacher
19 mins ago
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sana Khan is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
Sana Khan is a new contributor. Be nice, and check out our Code of Conduct.
Sana Khan is a new contributor. Be nice, and check out our Code of Conduct.
Sana Khan is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Code Review Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f209503%2fon-click-automatically-draw-rectangle-on-the-svg-map%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Welcome to Code Review. I'm afraid this question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information.
– Heslacher
19 mins ago