💾SVGElement()

browser ⟩ SVG ⟩ SVGElement()

💾 replit: SVGElemnt()

// ⭐ 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

// ⭐ 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,
});
PreviousSVGNextAttributes

Last updated

Was this helpful?