SVG (viewBox) & DOM (viewport)
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
SVG viewBox & DOM viewport
viewBox
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
https://www.sarasoueidan.com/blog/svg-coordinate-systems/
https://webdesign.tutsplus.com/tutorials/svg-viewport-and-viewbox-for-beginners--cms-30844
http://tutorials.jenkov.com/svg/svg-viewport-view-box.html
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/12297374.html
未经授权禁止转载,违者必究!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
2019-02-11 screen.height && screen.width
2019-02-11 优先级:P0
2019-02-11 CSS3 Selectors All In One