How can I add elements to an embedded SVG with plain Javascript? - javascript

I have written a small example page that looks like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>IGO – IRC Go</title>
<link rel="stylesheet" type="text/css" href="igo.css" />
<script type="text/javascript" src="igo.js"></script>
</head>
<body>
<h1 onclick="makeCircle()">IGO – IRC Go</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="board"
width="4" height="4" viewBox="0 0 4 4">
<!-- content will be generated by script -->
</svg>
<div id="foo"></div>
</body>
</html>
Where the igo.js looks like this:
function makeCircle() {
var circle = document.createElement("circle");
var board = document.getElementById("board");
circle.cx = 4;
circle.cy = 4;
circle.r = 4;
circle.fill = "lime";
board.appendChild(circle);
}
The problem is: It does not work; the circle is not displayed. Can you help me?

Please look in to the following URL:
http://blog.blazingcloud.net/2010/09/17/svg-scripting-with-javascript-part-1-simple-circle/
You should use code like:
var c2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
c2.setAttribute("cx", "250");
c2.setAttribute("cy", "100");
c2.setAttribute("r", "60");
c2.setAttribute("fill", "#996699");
c2.setAttribute("stroke", "#AA99FF");
c2.setAttribute("stroke-width", "7");
mySvg.appendChild(c2);
You are currently editing the DOM Object instead of an attribute used by the browser.
Live example: http://jsfiddle.net/CJrrz/

Related

SVG.js : Shapes extension: animate error

Below is an example that creates at star using SVG.js shapes extension. When I request to animate it from 7 points(spikes) to 10 points(spikes), it generates an error.
Any ideas?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG.js - Shapes Extension: animate error</title>
<script type="text/javascript" src="//svgDiscovery.com/SVG.js/svg.js"></script>
<script type="text/javascript" src="//svgDiscovery.com/SVG.js/Plugins/svg.shapes.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body style='padding:10px;font-family:arial;'>
<center>
<h4>SVG.js - Shapes Extension: animate error</h4>
<table>
<tr>
<td>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'></div>
</td>
</tr></table>
<script id=myScript>
//---access the empty DIV---
var mySVG = SVG('svgDiv').size(400, 400);
var myStar = mySVG.polygon().attr({id:'myPolygon',stroke:'blue','stroke-width':3,fill:'yellow'}).star({
inner: 50
, outer: 100
, spikes: 7
}).move(100,100)
//---creates error---
myStar.animate().star({ spikes: 10 })
</script>
</body>
</html>
So I found the time to update this extension. It is available on bower and as soon as the package-conflict is solved on npm, too.
It now requires version 2 of svg.js and works exactly as you specified
mySVG
.polygon()
.ngon()
.animate()
.star()

SVG.js: Draggable DIV foreignobject

Using SVG.js, I a have div that I placed in the svg as foreignobject. The div sizes nicely based on it innerHTML. I would like it be draggable. I added draggable() to the foreignobject, but it is not working properly: it does not retain the x,y dragged values.
Any ideas?
Below is an example of the problem.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG.js - Draggable foreignobject </title>
<script type="text/javascript" src="//svgDiscovery.com/SVG.js/svg.js"></script>
<script type="text/javascript" src="//svgDiscovery.com/SVG.js/Plugins/svg.foreignobject.js"></script>
<script type="text/javascript" src="//svgDiscovery.com/SVG.js/Plugins/svg.draggable.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body style='padding:10px;font-family:arial;'>
<center>
<h4>SVG.js - Draggable foreignobject </h4>
<table>
<tr>
<td>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'></div>
</td>
</tr></table>
<script id=myScript>
var mySVG = SVG('svgDiv').size(400, 400);
var fobj = mySVG.foreignObject().attr({id: 'fobj'})
fobj.move(30,30)
fobj.draggable()
var txt = "some text that is quite long. and it goes on and on. and it's pointless really. and the grammar is terrible. blah. blah. blah"
fobj.appendChild("div", {id: 'myDiv', innerHTML: txt})
myDiv.style.cursor = 'move'
myDiv.style.width = '200px'
myDiv.style.padding = '10px'
myDiv.style.background = 'white'
myDiv.style.height = myDiv.scollHeight+'px'
myDiv.style.border = "solid black 1px"
</script>
</body>
</html>

javascript teechart curved line issue

I want to draw smoothed lines for chart.
I have already made a chart using teechart.js, but it is not good working.
I've attached an image. Left image is mine.
I'd like to make line such as right
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>Chart</title>
<script src="./js/three.min.js" type="text/javascript"></script>
<script src="./js/Detector.js" type="text/javascript"></script>
<script src="./js/TrackballControls.js" type="text/javascript"></script>
<script src="./js/helvetiker_regular.typeface.js"></script>
<script src="./js/teechart.js" type="text/javascript"></script>
<script src="./js/teechart-3d.js" type="text/javascript"></script>
<script type="text/javascript">
"use strict";
var three1, Chart1;
function draw() {
three1 = new Tee.Three("canvas1");
three1.setShowShadows(true);
Chart1 = new Tee.Chart(three1);
Chart1.addSeries(new Tee.Line([60,70,70,60,50,40,30,40,50,60,50,40] , 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split(',')));
Chart1.addSeries(new Tee.Line([20,30,40,50,60,50,40,50,60,70,70,60]));
Chart1.title.text="";
Chart1.footer.text="";
Chart1.legend.visible = false;
Chart1.walls.back.size=0.2;
Chart1.walls.left.size=10;
Chart1.walls.bottom.size=10;
Chart1.walls.back.format.transparency=0.2;
Chart1.bounds.x = -100;
Chart1.bounds.y = 50;
Chart1.bounds.width = 900;
Chart1.bounds.height = 400;
Chart1.axes.left.setMinMax(0, 120);
if (three1.isEnabled()) {
Chart1.draw();
animate1();
} else {
// Show message (WebGL not available) :
Detector.addGetWebGLMessage();
// Disable WebGL and use HTML5 2D Canvas:
three1.setEnabled(false, Chart1);
}
// Loop
function animate1() {
three1.update();
requestAnimationFrame(animate1);
}
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas1" style="width: 700px; height: 500px; display: inline; background: white;" width="800" height="500"></canvas>
</body>
</html>
Hope good answers.
Checking your code I see it misses a couple of details, but correcting them it works without problems:
Set smoothed lines. In your example it would be:
Chart1.series.items[0].smooth = 0.5;
Chart1.series.items[1].smooth = 0.5;
Include teechart-extras.js to define Tee.drawSpline. It would be something like this:
<script src="./js/teechart-extras.js" type="text/javascript"></script>
I think you should take a look at THREE.TubeGeometry where you can pass a spline/curve as a path for the tube:
extrudePath = // define some spline or curve;
segments = 64;
radius = 5;
radiusSegments = 8;
closed = false;
tube = new THREE.TubeGeometry( extrudePath, segments, radius, radiusSegments, closed );
mesh = new THREE.Mesh( tube, material );
scene.add( mesh );
Check also the examples here

Randomizing Images using javascript

OK this is what im trying to do here:
I simply want to randomize the image under dv id splash and i have images placed in the root folder. I tried to randomize the code using function randomImg() here but the output is empty.
Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML</title>
<meta name="author" content="blahblahblah" />
<!-- Date: 2014-03-06 -->
<script type="text/javascript">
function randomImg()
{
var images = new Array();
images[0] = "img06.jpg";
images[1] = "img07.jpg";
images[4] = "img08.jpg";
images[5] = "img09.jpg";
images[6] = "img10.jpg";
var random = Math.ceil(Math.random()* images.length);
if (random == 0) { random =1; }
document.write('<img src="images[random]">');
}
</script>
</head>
<body>
<div id="header">
<div id="logo">
<h1>Welcome</h1>
<h2>Flower of the day</h2>
</div>
<div id="splash"><img src="virus.jpg" alt="random images"/></div>
<script type="text/javascript">
document.getElementById('splash').firstElementChild.src = 'img09.jpg';
randomImg();
</script>
</div>
</body>
</html>
Update this html:
<div id="splash"><img id='image' src="virus.jpg" alt="random images"/></div>
Instead of document.write('<img src="images[random]">'); put
document.getElementById('image').src=images[random];
Else
Simply replace document.write('<img src="images[random]">'); with
document.getElementById('splash').firstElementChild.src =images[random];

JavaScript and SVG in HTML [duplicate]

This question already has answers here:
How to access SVG elements with Javascript
(3 answers)
Closed 9 years ago.
I have the JavaScript file.
I have the SVG file.
Also I have HTML file.
<head>
...
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8">
...
</head>
<body>
...
<img src='svgfile.svg' type='image/svg+xml' />
...
</body>
Anyone knows how I can call the element of SVG in JavaScript? (circle for example)
If you want to dynamically interact, using Javascript, with the svg file which is loaded into your HTML5 page, you must load the svg as inline. If you load as an <object> you cannot program it using your javascript. However you can load the svg file as xml via XMLHttpRequest and fill a DIV's innerHTML with the response. This inline SVG then can be dynamically changed via your Javascript. This works across all browsers. Try the files below.
Assume you have an SVG file(my.svg)
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
<circle id="myCircle" cx="200" cy="200" fill="blue" r="150" />
</svg>
and your HTML5 file is as below:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<center>
<div id="svgInlineDiv" style='background-color:lightgreen;width:400px;height:400px;'></div>
<button onClick=changeInlineCircleColor()>Change Circle Color</button>
<div id="svgObjectDiv" style='background-color:lightblue;width:400px;height:400px;'>
<object data="my.svg" type="image/svg+xml" id="objsvg" width="100%" height="100%"></object>
</div>
</center>
<script id=myScript>
function changeInlineCircleColor()
{
myCircle.setAttribute("fill","red")
}
</script>
<script>
document.addEventListener("onload",inlineSVG(),false)
function inlineSVG()
{
var SVGFile="my.svg"
var loadXML = new XMLHttpRequest;
function handler(){
if(loadXML.readyState == 4 && loadXML.status == 200)
svgInlineDiv.innerHTML=loadXML.responseText
}
if (loadXML != null){
loadXML.open("GET", SVGFile, true);
loadXML.onreadystatechange = handler;
loadXML.send();
}
}
</script>
</body>
</html>

Categories