87 lines
2.5 KiB
JavaScript
87 lines
2.5 KiB
JavaScript
function doBigWhiteTriangle(id){
|
|
const svg = document.getElementById(id);
|
|
|
|
// Triangle settings
|
|
const sideLength = 740;
|
|
const centerX = 435;
|
|
const centerY = 493;
|
|
const angleOffset = -90 * (Math.PI / 180); // Start at top
|
|
|
|
// Generate 3 equilateral triangle points
|
|
const points = [];
|
|
for (let i = 0; i < 3; i++) {
|
|
const angle = angleOffset + i * (2 * Math.PI / 3); // 120° steps
|
|
const x = centerX + (sideLength / Math.sqrt(3)) * Math.cos(angle);
|
|
const y = centerY + (sideLength / Math.sqrt(3)) * Math.sin(angle);
|
|
points.push(`${x},${y}`);
|
|
}
|
|
|
|
// Create the triangle
|
|
const triangle = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
|
|
triangle.setAttribute("points", points.join(" "));
|
|
triangle.setAttribute("fill", "white");
|
|
//triangle.setAttribute("stroke", "black"); // Optional
|
|
//triangle.setAttribute("stroke-width", "2"); // Optional
|
|
svg.appendChild(triangle);
|
|
}
|
|
|
|
function doLittleWhiteTriangle(){
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function inlineStyles(svgElement) {
|
|
const allElements = svgElement.querySelectorAll('*');
|
|
const computedStyles = window.getComputedStyle(svgElement);
|
|
|
|
// Apply style to root SVG element
|
|
svgElement.setAttribute("style", computedStyles.cssText || "");
|
|
|
|
// Recursively apply computed styles to each element
|
|
allElements.forEach(el => {
|
|
const computed = window.getComputedStyle(el);
|
|
let inline = '';
|
|
for (let i = 0; i < computed.length; i++) {
|
|
const key = computed[i];
|
|
const value = computed.getPropertyValue(key);
|
|
inline += `${key}:${value};`;
|
|
}
|
|
el.setAttribute('style', inline);
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
function makeSvgRightClickable(id) {
|
|
const svg = document.getElementById(id);
|
|
inlineStyles(svg);
|
|
|
|
// Ensure SVG has proper namespace
|
|
svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
|
|
|
|
// Serialize SVG
|
|
const svgData = new XMLSerializer().serializeToString(svg);
|
|
const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
|
|
const url = URL.createObjectURL(svgBlob);
|
|
|
|
// Create image element
|
|
const img = document.createElement("img");
|
|
img.src = url;
|
|
img.width = svg.width.baseVal.value;
|
|
img.height = svg.height.baseVal.value;
|
|
img.alt = "Right-click to save SVG image";
|
|
|
|
// Replace or insert after SVG
|
|
svg.style.display = "none"; // hide original
|
|
svg.parentNode.insertBefore(img, svg.nextSibling);
|
|
}
|
|
|
|
// Call the function after D3 has drawn the SVG
|
|
//makeSvgRightClickable("id");
|
|
|