Могу ли я генерировать SVG с помощью js?

Question

Я ищу способ создания следующего SVG с использованием JavaScript.

Я, честно говоря, понятия не имею, как это сделать, и я не знаю, возможно ли это!Так как это для университетского проекта, мне разрешено использовать только чистый JavaScript без библиотек.РЕДАКТИРОВАТЬ: если это может помочь, у меня также есть файл .svg.Я не могу использовать .png, потому что мне нужно анимировать 2 элемента в нем.

<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>

Вот полный код, который включает в себя анимацию на Fiddle !Буду очень признателен за любую помощь!Заранее спасибо!Дайте мне знать, если вам нужна дополнительная информация!

Answer 1

Вы можете создавать узлы и добавлять их в элемент SVG следующим образом:

// 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)

РЕДАКТИРОВАТЬ

Добавлена ​​опция для создания тега SVG.