Integrating SVG and the Canvas Element in HTML
Problem
You want to use the canvas element and SVG together within a web page.
Solution
One option is to embed both the SVG and the canvas element directly into the HTML
page, and then access the canvas element from script within SVG:
<!DOCTYPE html>
<head>
<title>Canvas and SVG</title>
<meta charset="utf-8" />
</head>
<body>
<canvas id="myCanvas" width="400px" height="100px">
<p>canvas item alternative content</p>
</canvas>
<svg id="svgelem" height="400">
<title>SVG Circle</title>
<script type="text/javascript">
window.onload = function () {
var context =
document.getElementById("myCanvas").getContext('2d');
context.fillStyle = 'rgba(0,200,0,0.7)';
context.fillRect(0,0,100,100);
};
</script>
<circle id="redcircle" cx="100" cy="100" r="100" fill="red" stroke="#000" />
</svg>
</body>
Or you can embed the canvas element as a foreign object directly in the SVG:
<!DOCTYPE html>
<html>
<head>
<title>Accessing Inline SVG</title>
<meta charset="utf-8">
</head>
<body>
<svg id="svgelem" height="400" width="600">
<script type="text/javascript">
window.onload = function () {
var context2 = document.getElementById("thisCanvas").getContext('2d');
context2.fillStyle = "#ff0000";
context2.fillRect(0,0,200,200);
};
</script>
<foreignObject width="300" height="150">
<canvas width="300" height="150" id="thisCanvas">
alternate content for browsers that do not support Canvas
</canvas>
</foreignObject>
<circle id="redcircle" cx="300" cy="100" r="100" fill="red" stroke="#000" />
</svg>
</body>
</html>
EXPLAIN
When the SVG element is embedded into the current web page, you can access HTML elements from within the SVG. However, you can also embed elements directly in SVG, using the SVG foreignObject element. This element allows us to embed XHTML, MathML, RDF, or any other XML-based syntax.
In both solutions, I was able to use getElementById(). However, if I want to manipulate the elements using other methods, such as getElementsByTagName(),
I have to be care‐ ful about which version of the method I use. For instance, I can use getElementsByTag Name() for the outer canvas element, but I would need to use the namespace version of the method, getElementsByTagNameNS, if the contained object is XML,
such as RDF/ XML. Because the embedded object in the solution is HTML5, a namespace wasn’t necessary. Once you have the canvas context, use the element like you would from script within HTML: add rectangles, draw paths, create arcs, and so on.
Canvas? Or SVG?
Why would you use Canvas over SVG, or SVG over Canvas? The canvas element is
faster in frame-type animations. With each animation, the browser only needs to redraw
the changed pixels, not re-create the entire scene.
However, the advantage you get with
the canvas element animation lessen when you have to support a variety of screen sizes,
from smartphone to large monitor. SVG scales beautifully.
Another advantage to SVG is that it figures in rich data visualizations with the assistance
of powerful libraries, . But then, Canvas is used with 3D systems,
such as WebGL, .
But why choose one over the other? One use of SVG and Canvas together is to provide
a fallback for the canvas element: the SVG writes to the DOM and persists even if Java‐
Script is turned off, while the canvas element does not.
Join Our Telegram Channel to Stay Updated
![Javascript DOM Tutorial Part 1 [ Selectors ] How to Select HTML Elements Using Javascript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFE3NttPjKRUzbBqnGQNT8mtxG71mrDGLb-k8f-rw_I9Ov3Tu9uIFQtUgoxOozsx2TNf449IJ7SPgrEFFqrDdN98mWUWXsp8zFUteAmA7UaXDDjyQHE5b0oVkCzXT_aIgCVFD_ksqt18/s72-c/jspart10.jpg)
![Python Django Rest Framework Tutorial Part 2 [ DRF Separate Methods for Create,Update,Delete,List ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzEs_nyQ4dNnsoznaIbD_ifI3F3STp4Sd2eNDmKINgxyMvwt9Kc_BJHKWfeudr23RMsloD5Bd3PCfyBG96OY-cVZBTZ8Npc_86fCHd7iCKVy8fjtk4Xxawvw8OuvM1PhJpq-hTR28XJE/s72-c/DJANGO-REST2.jpg)
No comments:
Post a Comment