Question

我正在寻找一种使用JavaScript生成以下 SVG的方法。

老实说，我不知道该怎么做，也不知道这是否可能！由于这是一个大学项目，因此只允许使用纯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>

这是包含动画的完整代码on 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标签的选项。

我可以用js生成SVG吗？

1 个答案: