我正在寻找一种使用 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>
这是包含Fiddle动画的完整代码！我真的很感激任何帮助！先感谢您！如果您需要更多详细信息，请告诉我！
您可以创建节点并将它们添加到 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 标签的选项。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句