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>
Related
I want to load the Birt Report After calling the function in div or iframe.
Tried in below manner :
<html>
<head>
<script type="text/javascript">
function myFunction() {
**//var inn= "<birt\:viewer id=\"birtViewer\" reportDesign=\"test.rptdesign\" pattern=\"frameset\" height=\"500\" width=\"900\" format=\"html\"></birt\:viewer>"
//alert(inn)
//document.getElementById("test").innerHTML = inn;**
**var reporturl = "http://localhost:8080/Sample_Birt_viewer/frameset?__report=test.rptdesign&sample=my+name";**
alert("here");
**$('#reportload').load(reporturl);**
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<button onclick="myFunction()">Click me1</button>
<div id="test">
**<iframe id="reportload" name="myReport" height="300" width="1136" />**
**<%-- <birt:viewer id="birtViewer" reportDesign="test.rptdesign"
pattern="frameset"
height="500"
width="900"
format="html"></birt:viewer> --%>
</div>**
</body>
</html>
I tried in above manner it is not loading
when loading the page if call directly in div it is working(like below), But i want to load through Java script or jquery, because i wand to show selected values as well as report in down.
<iframe id="reportload" name="myReport" height="300" width="1136" src="http://localhost:8080/Sample_Birt_viewer/frameset?__report=test.rptdesign&sample=my+parameter" />
<birt:viewer id="birtViewer" reportDesign="test.rptdesign"
pattern="frameset"
height="500"
width="900"
format="html"></birt:viewer>
How can I over come above problem?
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 months ago.
I am new to javascript programming.
When i try to run this code, the default image in html tags shows up.
I used the setAttribute function but it doesn't work. Please Help!
<!DOCTYPE HTML>
<html>
<head>
<title>Javascript</title>
<script type="text/javascript">
var foo = document.getElementById("image");
foo.setAttribute("src", "glasses.jpg");
</script>
</head>
<body>
<img src="awesomesite.gif" id="image" alt="Awesomesite">
<p id="intro">
Hello World
</p>
</body>
</html>
either move the script to the bottom of your page or add the following to your script
document.onload(function()
{
var foo = document.getElementById("image");
foo.setAttribute("src", "glasses.jpg");
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<img src="http://i.stack.imgur.com/xkF9Q.jpg" id="image" alt="Awesomesite">
<p id="intro">
Hello World
</p>
<script>
window.onload = function () {
var logo = document.getElementById('image');
logo.src = "http://www.w3schools.com/html/pic_mountain.jpg";
};
</script>
</body>
</html>
When I click the link "show pdf" I want to display the embeded pdf. However there must be something wrong. The pdf will now load. Some help?
Check out my fiddle: http://jsfiddle.net/benjones337/7jkmvLL9/2/
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset=utf-8 />
<script type="text/javascript">
window.onload = function() {
document.getElementById("showPDF").onclick = function() {
document.getElementById("thePDF").style.visibility = "visible";
}
}
</script>
</head>
<body>
<div>
<object data="http://www.elml.org/website/en/download/gitta_databases.pdf" type="application/pdf">
<embed id="thePDF" src="http://www.elml.org/website/en/download/gitta_databases.pdf" width="700" height="575" type="application/pdf" />
</object>
<p><a id="showPDF">Show PDF</a></p>
</div>
</body>
</html>
Avoid using onload event in jsfiddle as this event already happened when the page is "loaded".
Hide the object itself (I moved your id to the parent element) as the embed element is not affected with your style.
jsfiddle.net/7jkmvLL9/6/
In my html page want to insert a 3d image if canvas is supported by the browser and a static image if it is not. The image should be inserted on page load dynamically.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Hello Modernizr</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="modernizr.js"></script>
<script>
if (Modernizr.canvas)
{
$(document).ready(function()
{
$("p").show();
});
alert("This browser supports HTML5 canvas!");
}
else
{
$(document).ready(function()
{
$("p").hide();
});
}
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>eseardsa
</body>
</html>
You can just add the image in your else statement similar to the code below. Although you probably want to manipulate a div instead of a p.
} else {
$(document).ready(function(){
$('p').text('<img src="yourImg.png" />');
}
}
change the java script
to display image in all browser
<div class="cont_machines_3d">
<div class="cont_3d">
<iframe height="600" scrolling="auto" src="3d/3dimage.html" width="800">
</iframe>
</div>
</div>
to display image in ie
<div class="cont_machines_3d_ie"><img src="/3d/images/img.jpg" width="800" /></div>
</div>
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/