I have read a few questions similar to this, but I can't get my code working properly. I want to add a SVG element when a the user click on the SVG-area.
Here is my HTML5 with SVG, it renders correctly:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.6.2.min.js"></script>
<script src="svgdraw.js"></script>
</head>
<body>
<svg id="canvas" width="500" height="500">
<circle cx="80" cy="80" r="50" fill="blue"/>
</svg>
</body>
</html>
Here is the JavaScript that is executed on a click event:
var svgDocument = document.getElementById('canvas');
var svgns = "http://www.w3.org/2000/svg";
var shape = svgDocument.createElementNS(svgns,"circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r", 20);
shape.setAttributeNS(null, "fill", "green");
document.getElementById('canvas').appendChild(shape);
In Google Chrome I get an error message that createElementNS doesn't exist. But I can't get it working if I remove all NS and null either. What is the correct way to do this? Is is different for different browsers?
As far as I know createElementNS() is part of the document-variable, try:
var shape = document.createElementNS(svgns,"circle");
Related
I've got 3 files: test.html, test.js and test.svg
I'm trying to call the different files into HTML but the file svg don't work
test.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Using SVG as an object</title>
<link href="index.css" rel="stylesheet" />
</head>
<body>
<h1>Test</h1>
<script type="text/javascript" src="test.js"></script>
<object data="test.svg" width="300" height="300"> </object> <!-- Not working -->
<input type="button" value="Start Animation" onclick="startAnimation();">
<input type="button" value="Stop Animation" onclick="stopAnimation();">
</body>
</html>
test.js
var timerFunction = null;
function startAnimation() {
if(timerFunction == null) {
timerFunction = setInterval(animate, 20);
}
}
function stopAnimation() {
if(timerFunction != null){
clearInterval(timerFunction);
timerFunction = null;
}
}
function animate() {
var circle = document.getElementById("circle1");
var x = circle.getAttribute("cx");
var newX = 2 + parseInt(x);
if(newX > 500) {
newX = 20;
}
circle.setAttribute("cx", newX);
}
test.svg
<svg width="500" height="100">
<circle id="circle1" cx="20" cy="20" r="10"
style="stroke: none; fill: #ff0000;"/>
</svg>
I don't understand why I can't insert svg file with object
Thanks for your help
See Dev.To Post: <load-file> Web Component
Use a modern, native W3C standard Web Component <load-svg>
it reads the SVG as text
adds SVG to shadowDOM as DOM element
moves the style element from lightDOM to shadowDOM
So style is only applied to one SVG
<load-svg shadowRoot src="//graphviz.org/Gallery/directed/fsm.svg">
<style>
svg { height:150px } text { stroke: green } path { stroke: red ; stroke-width:3 }
</style>
</load-svg>
<load-svg src="//graphviz.org/Gallery/directed/fsm.svg">
<!-- all HTML here is overwritten -->
</load-svg>
<script>
customElements.define('load-svg', class extends HTMLElement {
async connectedCallback() {
this.style.display = 'none'; // prevent FOUC (provided Custom Element is defined ASAP!)
let src = this.getAttribute("src");
let svg = await (await fetch(src)).text();
if (this.hasAttribute("shadowRoot")) {
this.attachShadow({mode:"open"}).innerHTML = svg;
this.shadowRoot.append(this.querySelector("style") || []);
} else {
this.innerHTML = svg;
}
this.style.display = 'inherit';
}
});
</script>
More complex example: How to make an svg interactive to gather comments/annotations on depicted elements
You can use svgs directly in the HTML. Easiest is to just use the SVG inside the HTML. You can also re-use an svg shape on a page but then the icons have a shadow-dom boundary.
If you use an object or svg tag, it will render just fine but you will lose all information about classes, IDs and so on in the SVG.
Further Information on SVG on css-tricks
More information about how to group and re-use shapes in SVG on css-tricks (and one more, also on css-tricks)
var timerFunction = null;
function startAnimation() {
if (timerFunction == null) {
timerFunction = setInterval(animate, 20);
}
}
function stopAnimation() {
if (timerFunction != null) {
clearInterval(timerFunction);
timerFunction = null;
}
}
function animate() {
var circle = document.getElementById("circle1");
var x = circle.getAttribute("cx");
var newX = 2 + parseInt(x);
if (newX > 500) {
newX = 20;
}
circle.setAttribute("cx", newX);
}
<svg width="500" height="100">
<circle id="circle1" cx="20" cy="20" r="10"
style="stroke: none; fill: #ff0000;"/>
</svg>
<input type="button" value="Start Animation" onclick="startAnimation();">
<input type="button" value="Stop Animation" onclick="stopAnimation();">
<object> tags can be used on many elements, including SVG files, and therefore not recognized as image elements, So:
It's not available on image search. So you can use an <img> tag as fallback (optional but recommended)
You should specify the type of the object
So you can change it like this:
<object type="image/svg+xml" data="test.svg" width="300" height="300">
<img src="test.svg" />
</object>
And another problem is the SVG file. Based on MDN documents :
The xmlns attribute is only required on the outermost SVG element of SVG documents. It is unnecessary for inner SVG elements or inside HTML documents.
so you need to add xmlns parameters to the SVG tag on SVG file like this :
<svg width="500" height="100" xmlns="http://www.w3.org/2000/svg">
<circle id="circle1" cx="20" cy="20" r="10"
style="stroke: none; fill: #ff0000;"/>
</svg>
I made a small simple example that works, checkout this sandBox link
Hello I would like to write a simple function that creates svgcircles where I only have to specify the x, y coordinates.
JavaScript code is:
function cir(x, y){
<circle cx="x" cy="y" r="10" fill="blue" />;
}
HTML code is:
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<svg width="1024" height="768">
cir(50, 50);
</svg>
</body>
</html>
What am I doing wrong?
You can return some HTML using a template literal and add it to your SVG element.
function cir(x, y) {
return `<circle cx=${x} cy=${y} r="10" fill="blue" />`;
}
document.querySelector('svg').insertAdjacentHTML('beforeend', cir(50, 50));
<svg width="1024" height="768"></svg>
Note: you should move your script to just before your </body> tag. That way the document will have time to load before the script is executed.
<script src="script.js"></script>
</body>
DOM resources on MDN:
querySelector
insertAdjacentHTML
EDIT
Now, if you wanted to include a form from which you can get the coordinates, you can do something like this.
function cir(x, y) {
return `<circle cx=${x} cy=${y} r="10" fill="blue" />`;
}
// Grab all the elements
const button = document.querySelector('.submit');
const svg = document.querySelector('svg');
const x = document.querySelector('.x');
const y = document.querySelector('.y');
// Add an event listener to the button
button.addEventListener('click', addShape, false);
function addShape(e) {
// Prevent the form from submitting
e.preventDefault();
svg.insertAdjacentHTML('beforeend', cir(x.value, y.value));
}
<form>
<input class="x" type="text" placeholder="X coord" />
<input class="y" type="text" placeholder="Y coord" />
<button class="submit">Submit</button>
</form>
<svg width="1024" height="768"></svg>
You can add more inputs for the radius and colour if you wanted.
Does anyone know how to force IE and Edge to display/refresh embedded SVG after changing its content (see code below)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<script type="text/javascript">
function onClick() {
document.getElementById('svg').innerHTML = '<circle r="50" cx="50" cy="50" fill="red" />';
}
</script>
</head>
<body>
<button type="button" onclick="onClick()" >Display red circle</button>
<svg id="svg"/>
</body>
</html>
Modify your markup as
<div id="container">
Your svg here
</div>
and add
document.getElementById("container").innerHTML += "";
at the end of your script.
As it was mentioned by #rzelek, SVG image will get updated on it's own if you add elements with svg.appendChild() rather than by assigning to svg.innerHTML.
One caveat, though: you must specify the http://www.w3.org/2000/svg namespace on the element you create using document.createElementNS(), instead of the normal createElement().
Example:
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('r', '50');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('fill', 'red');
document.getElementById('svg').appendChild(circle);
JSFiddle
Basically, you do not need to reload anything. Actually, the problem is different. You will not able to interact with SVG using standard innerHTML method. Your SVG is not updated after calling to innerHTML. This method is suitable for editing HTML elements only.
Plase take a look at this:
update SVG dynamically
Plunker
JS:
var x = 0;
function onClick() {
var div = document.getElementById('svg');
Update(div);
}
function Update(div){
x++;
div.innerHTML = '<svg><circle r="' + x + '" cx="' + x +'" cy="' + x + '" fill="red" /></svg>';
if (x < 100)
{
setTimeout(function() {
Update(div);
}, 100);
}
console.log(div.innerHTML);
}
HTML:
<body>
<button type="button" onclick="onClick();" >Display red circle</button>
<div id="svg">
</div>
</body>
Wrapping the SVG in a container and then updating the content of the container seems to work.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src='draw.js'></script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="200"></svg>
</body>
</html>
draw.js
function draw() {
var svg = document.getElementsByTagName('svg')[0];
var svgNS = svg.namespaceURI;
var rect = document.createElementNS(svgNS,'rect');
rect.setAttribute('x',5);
rect.setAttribute('y',5);
rect.setAttribute('width',100);
rect.setAttribute('height',36);
rect.setAttribute('fill','#95B3D7');
var link = document.createElement('a');
link.setAttribute('xlink:href', 'http://www.google.com');
link.appendChild(rect);
svg.appendChild(link);
}
$( document ).ready( draw );
The generated HTML looks correct, but the rectangle does not appear:
<a xlink:href="http://www.google.com">
<rect x="5" y="5" width="100" height="36" fill="#95B3D7"></rect>
</a>
In fact, the generated HTML does work, when pasted into an HTML file. So, is there some limitation of the browser using SVG, Javascript and links?
Using Chrome 39.
You need to create an SVG link element and not a html link element i.e. in the SVG namespace
var link = document.createElementNS(svgNS, 'a');
link.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://www.google.com');
You get it right for the rect itself!
I am designing a web page which has a lot of mathematical figures .e.g rhombus ,square ,rectangle,triangle etc....
what I am trying to achieve is ,when I click on any of the figures ,it should show up a msg /info kind of thing.
I have only one canvas id ,and lot of figures in it ,how i make them clickable so that I can display the required info from each figure
Here's how to use native html canvas to let users get a message about the shape they clicked:
for each shape, put their corner points in a javascript object
put all those shape-objects in an array
listen for mousedown events
in mousedown check if the mouse is inside each shape using context.isPointInPath
if the mouse is inside an object, display your message about that shape
A Demo: http://jsfiddle.net/m1erickson/wPMk5/
Example code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
// canvas variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
// set styles
ctx.fillStyle="skyblue";
ctx.strokeStyle="lightgray";
ctx.lineWidth=2;
// create a triangle and parallelogram object
var triangle={
points:[{x:25,y:100},{x:50,y:50},{x:75,y:100}],
message:"I am a triangle"
}
var parallelogram={
points:[{x:150,y:50},{x:250,y:50},{x:200,y:100},{x:100,y:100}],
message:"I am a parallelogram"
}
// save the triangle and parallelogram in a shapes[] array
var shapes=[];
shapes.push(triangle);
shapes.push(parallelogram);
// function to draw (but not fill/stroke) a shape
// (needed because isPointInPath only tests the last defined path)
function define(shape){
var points=shape.points;
ctx.beginPath();
ctx.moveTo(points[0].x,points[0].y);
for(var i=1;i<points.length;i++){
ctx.lineTo(points[i].x,points[i].y);
}
}
// function to display a shape on the canvas (define + fill + stroke)
function draw(shape){
define(shape);
ctx.fill();
ctx.stroke();
}
// display the triangle and parallelogram
draw(triangle);
draw(parallelogram);
// called when user clicks the mouse
function handleMouseDown(e){
e.preventDefault();
// get the mouse position
var mouseX=parseInt(e.clientX-offsetX);
var mouseY=parseInt(e.clientY-offsetY);
// iterate each shape in the shapes array
for(var i=0;i<shapes.length;i++){
var shape=shapes[i];
// define the current shape
define(shape);
// test if the mouse is in the current shape
if(ctx.isPointInPath(mouseX,mouseY)){
// if inside, display the shape's message
alert(shape.message);
}
}
}
// listen for mousedown events
$("#canvas").mousedown(function(e){handleMouseDown(e);});
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
If you can use SVG instead you can achive this goal very easily.
Using http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html you can draw relevant shapes and you can get the svg code. Add onclick() events to it .
By this online tool you can create shapes
Click SVG to get the code
Code
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<rect id="svg_1" height="74" width="150" y="95" x="58" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<ellipse ry="35" rx="42" id="svg_2" cy="216" cx="158" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<ellipse ry="36" rx="80" id="svg_3" cy="123" cx="342" stroke-width="5" stroke="#000000" fill="#0000ff"/>
<path id="svg_4" d="m265,257l63,-59l82,47l-22,71l-84,5l-39,-64z" stroke-width="5" stroke="#000000" fill="#0000ff"/>
</g>
</svg>
You can add onclick events to this.And also following shows adding jquery title mouse over also.
<rect id="svg_29" class="popup_tool" title="Message you want to popup when mouse over" height="17" width="20" y="224" x="452" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="3" stroke="#000000" fill="#ff0000"/>
Hope you got the answer
simply wrap the canvas id inside a div element after that you can hide or show the div using js/jquery with that you can display your message
To easily achieve your task using canvas element you need a framework like fabricjs