# SVGElement()

[browser](https://lochiwei.gitbook.io/web/browser) ⟩ [SVG](https://lochiwei.gitbook.io/web/browser/svg) ⟩ SVGElement()

{% tabs %}
{% tab title="💾 程式" %}
:floppy\_disk: replit: [SVGElemnt()](https://replit.com/@pegasusroe/SVG-element-from-string#script.js)

```javascript
// ⭐ SVGElement
function SVGElement(tagName, attributes, config) {
    // create SVG element (<svg>, <path>, <rect>, <text> ...)
    let elem = document.createElementNS("http://www.w3.org/2000/svg", tagName);
    // set attributes (non-string value is converted automatically into string)
    Object.entries(attributes).forEach(([key, value]) => elem.setAttribute(key, value));
    // furthur configuration if necessary
    if (config) config(elem);
    // return the element
    return elem;
}
```

💈範例： [pie-chart](https://lochiwei.gitbook.io/web/browser/svg/examples/pie-chart "mention")

```javascript
// ⭐ create chart with <svg> element
let chart = SVGElement('svg', {
    width: width, height: height, 
    viewBox: `0 0 ${width} ${height}`,
    // text styles for the chart (can be set with CSS instead)
    'font-family': "sans-serif",
    'font-size': 18,
});
```

{% endtab %}

{% tab title="⬇️ 應用" %}

* [pie-chart](https://lochiwei.gitbook.io/web/browser/svg/examples/pie-chart "mention")
  {% endtab %}

{% tab title="📘 手冊" %}

* [document](https://lochiwei.gitbook.io/web/browser/dom/type/document "mention") ⟩ [.createElementNS()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS) - to create SVG elements.
  {% endtab %}

{% tab title="👥 相關" %}

* [str.htmltoelement](https://lochiwei.gitbook.io/web/js/val/prim/str/method/str.htmltoelement "mention")
* [elem.wrappedwithhtml](https://lochiwei.gitbook.io/web/browser/dom/type/element/+ext/elem.wrappedwithhtml "mention")
  {% endtab %}
  {% endtabs %}