0

I'm looking for a way to generate the following SVG with javascript.

I honestly have no idea on how to do it, neither I know if it's possible! Since this is for an university project, I'm only allowed to use pure javascript, with no libraries. EDIT: if it can help, I also have the .svg file. I can't use .png because I need to animate 2 elements within it.

<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 225.5 225.5" style="enable-background:new 0 0 225.5 225.5;" xml:space="preserve">

    <path id="Luna1" class="st0" d="M112.8,225.5C50.5,225.5,0,175,0,112.8S50.5,0,112.8,0V225.5z"/>
    <path id="Luna2" class="st1" d="M112.8,0C175,0,225.5,50.5,225.5,112.8S175,225.5,112.8,225.5V0z"/>
    <circle id="Cerchio1" class="st2" cx="46.4" cy="112.8" r="18.4"/>
    <circle id="Cerchio2" class="st2" cx="179.1" cy="112.8" r="18.4"/>
</svg>

<style type="text/css">
    .st0{fill:#6DC06B;}
    .st1{fill:#0B7660;}
    .st2{fill:#17AF80;}
    svg {
        width: 200px;
        height: 200px;
        cursor: pointer;
        transform: rotate(45deg);
    }
    .st2 {
        -webkit-transition: 1s ease-in-out;
        -moz-transition: 1s ease-in-out;
        -o-transition: 1s ease-in-out;
        transition: 1s ease-in-out;
     }
</style>

Here's the full code that includes the animationon Fiddle! I would really appreciate any help! Thank you in advance! Let me know if you need any further details!

IanWing
  • 113
  • 9
  • 1
    To clarify, are you asking **_"How to convert an image (jpg/png) into an SVG, using JavaScript?"_** ? – Alicia Sykes Jun 02 '19 at 11:02
  • If so, your best bet would probably be to use a library. There is [**`canvg`**](https://github.com/canvg/canvg) which does what you need, I used it about 6/7 years back and it was very good. – Alicia Sykes Jun 02 '19 at 11:06
  • No @Alicia, I'm looking for a way to replace an IMG element with an SVG using .replaceChild, I just don't know how to generate that same SVG in JS. Also, no libraries allowed for this - sadly :( – IanWing Jun 02 '19 at 11:11
  • Still not clear... _"I just don't know how to generate that same SVG in JS"_. Sounds like what I just answered above..?.. Use a lib for that. – Alicia Sykes Jun 02 '19 at 11:14
  • You can create an svg element using [create​ElementNS()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS). You can add attributes to the created svg elements using [set​AttributeNS()](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttributeNS) – enxaneta Jun 02 '19 at 11:24
  • Possible duplicate of [Creating SVG elements dynamically with javascript inside HTML](https://stackoverflow.com/questions/20539196/creating-svg-elements-dynamically-with-javascript-inside-html) – Heretic Monkey Jun 02 '19 at 19:58

1 Answers1

0

You can create nodes and add them to an SVG element like this:

// store namespace
let ns = "http://www.w3.org/2000/svg"

// create svg element
let svg = document.createElementNS(ns, "svg")
document.body.appendChild(svg)

// set width and height
svg.setAttribute("width", "100")
svg.setAttribute("height", "100")

// just an example to create a path
let path = document.createElementNS(ns, "path")
path.setAttributeNS(null, "stroke-width", 2)
path.setAttributeNS(null, "d", "M300 200 m-10.292521287196118 -2.2297708853450806 l-8.789109120138724 -1.6054377906297648")


// add the path to the svg
svg.appendChild(path)

EDIT

Added option to create the SVG tag as well.

Kokodoko
  • 26,167
  • 33
  • 120
  • 197