js operate svg

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 发布文章使用：只允许注册用户才可以访问！

---