svg - 如何在 svg 文档中以编程方式创建 svg 元素？

Question

我知道我们可以使用 document.createElementNS("http://www.w3.org/2000/svg","line"); 创建一个嵌入到html页面。

但是，这种方法似乎不适用于独立的 svg 文档。

实际上，我想在 svg 中绘制印度国旗，但是，在国旗的轮子上绘制 24 个辐条会非常耗时。因此，我想到了通过 JavaScript 以编程方式绘制它们。

任何有关如何在独立 svg 文档中以编程方式创建元素的帮助将不胜感激。

Answer 1

您可以在 svg 元素内使用 javascript。我只做了旗帜的中心。请注意 viewBox="-50 -50 100 100"。点 {x:0,y:0} 位于 SVG Canvas 的中心。

svg{border:1px solid; width:90vh;}

<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" >
   
  <g id="center" fill="blue" stroke="blue">
  <circle r="5" />
  <circle id="outline" stroke-width="4" fill="none" r="48" />
  <polygon id="spoke" points="0,0 20,1.5 48,0 20,-1.5 0,0" fill="blue" stroke="none" />
  <circle id="dot" r="2.5" cx="46" transform="rotate(7.5)"  />
  </g>
  
    <script>
        <![CDATA[
const SVG_XLINK = "http://www.w3.org/1999/xlink";
const SVG_NS = 'http://www.w3.org/2000/svg';


// a function that creates a new `<use>` element and rotates it around the origin of the SVG canvas
function reuse(used,parent,i) {  
let use = document.createElementNS(SVG_NS, 'use');
use.setAttributeNS(SVG_XLINK, 'xlink:href', used); use.setAttributeNS(null,"transform" ,`rotate(${360*i/24})`);
parent.appendChild(use);
}
// a loop that creates 24 use elements
for(let i = 0;i < 24; i++ ){
reuse("#spoke",document.querySelector("#center"),i);
reuse("#dot",document.querySelector("#center"),i);
}
        ]]> 
  </script>
 
</svg>