DOM生成用便利ツール:実例(SVG)
DOM生成用便利ツール:実例(SVG)
code:old.js
let spinner = document.createElement("div");
spinner.style.position = "fixed";
spinner.style.top = "50%";
spinner.style.left = "50%";
spinner.style.translate = "-50% -50%";
spinner.style.padding = "8px";
spinner.style.borderRadius = "50%";
spinner.style.backgroundColor = "#ffffff";
spinner.style.fontSize = "0px";
function svgelegen(name) {
}
let svg_element = svgelegen("svg");
spinner.appendChild(svg_element);
svg_element.setAttribute("width", "48");
svg_element.setAttribute("height", "48");
svg_element.setAttribute("viewBox", "0 0 16 16");
let svg_g_element = svgelegen("g");
svg_element.appendChild(svg_g_element);
svg_g_element.setAttribute("fill", "none");
svg_g_element.setAttribute("fillRule", "evenodd");
svg_g_element.setAttribute("stroke", "#08f");
svg_g_element.setAttribute("stroke-width", "2");
let svg_g_circle_element = svgelegen("circle");
svg_g_element.appendChild(svg_g_circle_element);
svg_g_circle_element.setAttribute("cx", "8");
svg_g_circle_element.setAttribute("cy", "8");
svg_g_circle_element.setAttribute("r", "7");
svg_g_circle_element.setAttribute("opacity", "0.25");
let svg_g_path_element = svgelegen("path");
svg_g_element.appendChild(svg_g_path_element);
svg_g_path_element.setAttribute("d", "M15 8Q14.3,14.3,8,15");
let svg_g_path_at_element = svgelegen("animateTransform");
svg_g_path_element.appendChild(svg_g_path_at_element);
svg_g_path_at_element.setAttribute("attributeName", "transform");
svg_g_path_at_element.setAttribute("type", "rotate");
svg_g_path_at_element.setAttribute("from", "0 8 8");
svg_g_path_at_element.setAttribute("to", "360 8 8");
svg_g_path_at_element.setAttribute("dur", "1s");
svg_g_path_at_element.setAttribute("repeatCount", "indefinite");
が
通常版:
code:new_standard.js
let spinner = h("div", {
style: "position:fixed;top:50%;left:50%;translate:-50% -50%;padding:8px;border-radius:50%;background-color:#ffffff;font-size:0px;"
}, [
svg("svg", {
width: "48",
height: "48",
viewBox: "0 0 16 16",
}, [
svg("g", {
fill: "none",
fillRule: "evenodd",
stroke: "#08f",
"stroke-width": "2"
}, [
svg("circle", {
cx: "8",
cy: "8",
r: "7",
opacity: "0.25"
}, []),
svg("path", {
d: "M15 8Q14.3,14.3,8,15"
}, [
svg("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 8 8",
to: "360 8 8",
dur: "1s",
repeatCount: "indefinite"
}, [])
])
])
])
]);
ブロックの記号だけの行、情報密度下がるし画面外に行くから余計見にくくて嫌い
メソッドチェーン版:
code:new.js
let spinner = h2("div", {
style:
"position:fixed;top:50%;left:50%;translate:-50% -50%;padding:8px;border-radius:50%;background-color:#ffffff;font-size:0px;",
});
let svgElement
spinner.appendChild(svgElement = svg("svg", {
width: "48",
height: "48",
viewBox: "0 0 16 16",
})
.c("g", {
fill: "none",
fillRule: "evenodd",
stroke: "#08f",
"stroke-width": "2",
})
.s("circle", { cx: "8", cy: "8", r: "7", opacity: "0.25" })
.c("path", { d: "M15 8Q14.3,14.3,8,15" })
.s("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 8 8",
to: "360 8 8",
dur: "1s",
repeatCount: "indefinite",
})
.p()
.p())