我可以用js生成SVG吗？答案

【问题标题】：Can I generate SVG with js?我可以用js生成SVG吗？
【发布时间】：2019-10-18 05:51:08
【问题描述】：

我正在寻找一种使用 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 的完整代码！我真的很感激任何帮助！先感谢您！如果您需要更多详细信息，请告诉我！

【问题讨论】：

澄清一下，您是在问“如何使用 JavaScript 将图像 (jpg/png) 转换为 SVG？”？跨度>
如果是这样，您最好的选择可能是使用库。 canvg 可以满足您的需求，我大约在 6/7 年前使用过它，它非常好。
不@Alicia，我正在寻找一种使用.replaceChild 将IMG 元素替换为SVG 的方法，我只是不知道如何在JS 中生成相同的SVG。此外，没有图书馆允许这样做 - 可悲的是:(
仍然不清楚... “我只是不知道如何在 JS 中生成相同的 SVG”。听起来像我刚才在上面回答的......？......为此使用一个库。
您可以使用createElementNS() 创建一个svg 元素。您可以使用 setAttributeNS() 向创建的 svg 元素添加属性

标签： javascript html css dom svg

【解决方案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 标签的选项。

【讨论】：

是否可以直接从 javascript 创建 svg？
你的意思是不使用getElementById？我将其添加到答案中。
你的回答对我帮助很大！谢谢！