4

I know that we can use the document.createElementNS("http://www.w3.org/2000/svg","line"); to create a svg element embeded in a html page.

But, this method doesn't seems to work in a standalone svg document.

Actually, I am trying to draw the national flag of India in svg, but, drawing the 24 spokes in the wheel of the flag would be very time consuming. So, I thought of drawing them programmatically through JavaScript.

Any help on how to create elements programmatically in a standalone svg document will be appreciated.

Puspam
  • 2,137
  • 2
  • 12
  • 35

2 Answers2

4

You can use javascript inside an svg element. I've done only the center of the flag. Please observe the viewBox="-50 -50 100 100". The point {x:0,y:0} is in the center of the SVG canvas.

svg{border:1px solid; width:90vh;}
<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" >
   
  <g id="center" fill="blue" stroke="blue">
  <circle r="5" />
  <circle id="outline" stroke-width="4" fill="none" r="48" />
  <polygon id="spoke" points="0,0 20,1.5 48,0 20,-1.5 0,0" fill="blue" stroke="none" />
  <circle id="dot" r="2.5" cx="46" transform="rotate(7.5)"  />
  </g>
  
    <script>
        <![CDATA[
const SVG_XLINK = "http://www.w3.org/1999/xlink";
const SVG_NS = 'http://www.w3.org/2000/svg';


// a function that creates a new `<use>` element and rotates it around the origin of the SVG canvas
function reuse(used,parent,i) {  
let use = document.createElementNS(SVG_NS, 'use');
use.setAttributeNS(SVG_XLINK, 'xlink:href', used); use.setAttributeNS(null,"transform" ,`rotate(${360*i/24})`);
parent.appendChild(use);
}
// a loop that creates 24 use elements
for(let i = 0;i < 24; i++ ){
reuse("#spoke",document.querySelector("#center"),i);
reuse("#dot",document.querySelector("#center"),i);
}
        ]]> 
  </script>
 
</svg>
enxaneta
  • 31,608
  • 5
  • 29
  • 42
  • Thanks a lot for the code, but I could not understand actually which part of the code is adding a shape. – Puspam Mar 02 '19 at 14:09
  • 1
    In SVG you can [reuse elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use). All I am drawing are the two circles one spoke and one dot.The spoke and the dot are reused 24 times and rotated. for making thinks easier I've written the function `reuse(used,parent,i)` where `used` is a string representing the `id` of the reused element, the parent is the element where I'm appending the new `` element and `i` is the index - used to rotate the element. – enxaneta Mar 02 '19 at 15:08
  • Thanks for explaning. Now I will be able to create a vector graphics of the India flag. – Puspam Mar 02 '19 at 15:56
  • Is there any technique to create svg elements programmatically ? – Puspam Mar 02 '19 at 15:58
  • I'm afraid I don't understand you. In my example I've created `` elements. What kind of elements do you want to create? – enxaneta Mar 02 '19 at 16:18
  • Just like in HTML we can create any element dynamically, I want to create the 'rect', 'circle' and other elements which are supported in svg. How to do that ? – Puspam Mar 02 '19 at 16:38
  • In SVG you use [document.createElementNS()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS). If you have a concrete example please ask a different question. I'll be glad to help. Meanwhile if you think that I've answered your question please accept my answer. This example may help you: [JavaScript createElement and SVG](https://stackoverflow.com/questions/3492322/javascript-createelement-and-svg) – enxaneta Mar 02 '19 at 17:34
  • Thanks for your response and help. I learnt many things. Have a nice day :) – Puspam Mar 03 '19 at 08:30
-1

You can't do what you're trying to do since Javascript shouldn't be included in, and isn't understood or processed inside a SVG file.

MSC
  • 3,286
  • 5
  • 29
  • 47
  • But I know that we can use the <[CDATA[...]]> inside the – Puspam Mar 02 '19 at 10:28