On click automatically draw triangle on the SVG Map

up vote
0
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.

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>

asked 1 min ago

Sana Khan

New contributor

add a comment |

up vote
0
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.

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>

asked 1 min ago

Sana Khan

New contributor

add a comment |

up vote
0
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.

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>

asked 1 min ago

Sana Khan

New contributor

I tried an example of drawing circle in SVG map but i want to draw rectangle and i am unable to do it.

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

asked 1 min ago

Sana Khan

New contributor

asked 1 min ago

Sana Khan

New contributor

asked 1 min ago

Sana Khan

New contributor

asked 1 min ago

Sana Khan

asked 1 min ago

Sana Khan

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 |

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "196"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

Sana Khan is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

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-triangle-on-the-svg-map%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

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.

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk