Skip to main content

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.

SVG create dynamic circle Example Cick inside SVG and Add New Circle
<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.



SVG create dynamic element 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>




Comment

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