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

SVG (viewBox) & DOM (viewport)

circle

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-02-10
 * @modified 2020-02-11
 *
 * @description
 * @augments
 * @example
 * @link http://xahlee.info/js/js_scritping_svg_basics.html
 * @link https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML
 *
 */

// 容器小，circle 大，导致 circle 被剪切
const svgStr = `<svg width="100" height="100"><circle cx="80" cy="80" r="30" fill="grey" stroke="purple"></circle></svg>`;

// ？ viewBox 缩放比例
// 容器大，内容小，完全绘制，逆时针，顺时针 ？
const svgMeta = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" width="100%" height="100%"><circle cx="100" cy="100" r="50" fill="red" stroke="green"></circle></svg>`;

const body = document.querySelector(`body`);

body.insertAdjacentHTML(`beforeend`, svgStr);

body.insertAdjacentHTML(`beforeend`, svgMeta);


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);
};

https://codepen.io/xgqfrms/pen/gOppybr?editors=0010