SVG Examples
How to Create Dynamic Element in SVG?
Jquery (javascript) are reliable to create dynamic element of svg. let take of an example. we are create an dynamic svg circle. If we are clicked inside svg that are create a new circle and added to within svg.
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<body>
<svg id="dynamicElementSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="230" width="300" onclick="dynamicAdd.circle()">
<text x=10 y=20 fill="gray">Cick inside SVG and Add New Circle</text>
<g id="itemContainer" x=0 y= 0 width="100%" height="100%" stroke="gray" stroke-width="5">
</g>
<!-- JQuery-->
<script type="text/JavaScript">
<![CDATA[
var dynamicAdd=[];
dynamicAdd.makeSVG=function (tag, attrs) {
var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var item in attrs) {
el.setAttribute(item, attrs[item]);
}
return el;
}
dynamicAdd.strokeColor=function(){
var colorIteam=['gray','burlywood','red','blue','green','hotpink'];
return colorIteam[dynamicAdd.range(0,5)];
}
dynamicAdd.clearItemContainer=function(){
$("#itemContainer").text("");
}
dynamicAdd.circle=function(){
//Create a circle
var auxiliary=dynamicAdd.makeSVG("circle",{
cx:dynamicAdd.range(10,70)+"%", //given cx access position eg 100 px or 50%
cy:dynamicAdd.range(10,70)+"%" ,
fill:"none",
'stroke-width':4,
stroke:dynamicAdd.strokeColor(),
r:dynamicAdd.range(10,50), //radius of circle
//add more attributes if you need
});
$("#itemContainer").append(auxiliary);
}
dynamicAdd.range=function(min,max)
{
//get random value between ranges
return Math.floor(Math.random()*(max-min+1)+min);
}
$(function(){
//default circle
dynamicAdd.circle();
});
]]>
</script>
<!-- CSS of This SVG-->
<style>
<![CDATA[
#dynamicElementSvg{
border:3px solid #2196f3;
}
]]>
</style>
</svg>
</body>
</html>Note that when clicked inside svg that are not specified the circle cx and cy position.this case that are work on random value. there are similar way we can add any element. for example.
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<body>
<span><button class="btn-btn default" onclick="addDynamicExample.circle()"> Add circle</button>
<button class="btn-btn default" onclick="addDynamicExample.rectangle()"> Add Rectangle</button>
<button class="btn-btn default" onclick="addDynamicExample.clearitemContainerStores1()"> Clear All</button>
</span>
<br>
<br>
<svg id="addDynamicExampleSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="230" width="300" >
<g id="itemContainerStores1" x=0 y= 0 width="100%" height="100%" stroke="gray" stroke-width="5">
</g>
<!-- JQuery-->
<script type="text/JavaScript">
<![CDATA[
var addDynamicExample=[];
addDynamicExample.makeSVG=function (tag, attrs) {
var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var item in attrs) {
el.setAttribute(item, attrs[item]);
}
return el;
}
addDynamicExample.strokeColor=function(){
var colorIteam=['gray','burlywood','red','blue','green','hotpink'];
return colorIteam[addDynamicExample.range(0,5)];
}
addDynamicExample.clearitemContainerStores1=function(){
$("#itemContainerStores1").text("");
}
addDynamicExample.circle=function(){
//Create a circle
var auxiliary=addDynamicExample.makeSVG("circle",{
cx:addDynamicExample.range(10,70)+"%", //given cx access position eg 100 px or 50%
cy:addDynamicExample.range(10,70)+"%" ,
fill:"none",
'stroke-width':4,
stroke:addDynamicExample.strokeColor(),
r:addDynamicExample.range(10,50), //radius of circle
//add more attributes if you need
});
$("#itemContainerStores1").append(auxiliary);
}
addDynamicExample.rectangle=function(){
//Create a rect
var auxiliary=addDynamicExample.makeSVG("rect",{
x:addDynamicExample.range(10,100), //given x
y:addDynamicExample.range(10,100) , //given x
fill:"none",
'stroke-width':4,
stroke:addDynamicExample.strokeColor(),
width:addDynamicExample.range(10,50)+"%",
height:addDynamicExample.range(10,50)+"%"
});
$("#itemContainerStores1").append(auxiliary);
}
addDynamicExample.range=function(min,max)
{
//get random value between ranges
return Math.floor(Math.random()*(max-min+1)+min);
}
$(function(){
//default shapes
addDynamicExample.circle();
addDynamicExample.rectangle();
});
]]>
</script>
<!-- CSS of This SVG-->
<style>
<![CDATA[
#addDynamicExampleSVG{
border:3px solid #2196f3;
}
]]>
</style>
</svg>
</body>
</html>
Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.
New Comment