xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

js operate svg

js dynamic create svg

https://stackoverflow.com/questions/20539196/creating-svg-elements-dynamically-with-javascript-inside-html

how to dynamic create svg element in javascript

http://xahlee.info/js/js_scritping_svg_basics.html

https://github.com/xahlee

demo

https://codepen.io/xgqfrms/pen/MWwwjjq

const jsCreatSVG = () => {
  // create the svg element, namespace
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

  // meta
  svg.setAttribute("version", "1.1");
  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
  svg.setAttribute("viewBox", "0 0 100 100");

  // set width and height
  svg.setAttribute("width", "100");
  svg.setAttribute("height", "100");


  // create a circle
  const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");

  circle.setAttribute("cx", "80");
  circle.setAttribute("cy", "80");
  circle.setAttribute("r", "30");
  circle.setAttribute("fill", "red");

  // attach it to the container
  svg.appendChild(circle);

  // attach container to document
  document.querySelector(`body`).appendChild(svg);
};

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-02-10
 * @modified
 *
 * @description
 * @augments
 * @example
 * @link http://xahlee.info/js/js_scritping_svg_basics.html
 *
 */


// create the svg element, namespace
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

// set width and height
svg.setAttribute("width", "100");
svg.setAttribute("height", "100");

// create a circle
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");

circle.setAttribute("cx", "80");
circle.setAttribute("cy", "80");
circle.setAttribute("r", "30");
circle.setAttribute("fill", "red");

// attach it to the container
svg.appendChild(circle);

// attach container to document
document.querySelector(`body`).appendChild(svg);

svg image

const img = document.createElement(`img`);

img.src = `https://cdn.xgqfrms.xyz/svg/svg-all-in-one/svg-path.svg`;
// "https://cdn.xgqfrms.xyz/svg/svg-all-in-one/svg-path.svg"

document.querySelector(`body`).appendChild(img);
// <img src=​"https:​/​/​cdn.xgqfrms.xyz/​svg/​svg-all-in-one/​svg-path.svg">​

https://www.cnblogs.com/xgqfrms/p/12121298.html

svg-all-in-one

https://cdn.xgqfrms.xyz/svg/svg-all-in-one/svg-path.html

https://www.cnblogs.com/xgqfrms/p/12160378.html

https://vecta.io/blog/best-way-to-embed-svg

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---