PeterEdmond/EoQ_Supporting_Files
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Made background transparent for single triangles

Browse Source
This commit is contained in:
Peter Edmond 2025-05-15 20:49:15 +01:00
parent b1bc1b3ccd
commit 3eb2bb0491
2 changed files with 36 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
IndexUsingJS.html
View File

@ -51,13 +51,23 @@
} }
</style> </style>
</head> </head>
<body onload="let amber = '#ffbf00'; <body onload="
let amber = '#ffbf00';
doBigWhiteTriangle('svg1'); doBigWhiteTriangle('svg1');
drawtriangle('#svg1','Roles','#008845',[0.5,0.6,0.5],'red', { x: 0, y: 350 },-0.7); drawtriangle('#svg1','Roles','#008845',[0.5,0.6,0.5],'red', { x: 0, y: 350 },-0.7);
drawtriangle('#svg1','Actions','#b2c8c4',[0.1,0.6,0.5],'green',{ x: 370, y: 350 },2.3); drawtriangle('#svg1','Actions','#b2c8c4',[0.1,0.6,0.5],'green',{ x: 370, y: 350 },2.3);
drawtriangle('#svg1','Approach','#ed4c0c',[0.3,0.6,0.5],amber,{ x: 185, y: 30 },1.4); drawtriangle('#svg1','Approach','#ed4c0c',[0.3,0.6,0.5],amber,{ x: 185, y: 30 },1.4);
drawtriangleinverted('#svg1','Impact','#74469c',[0.7,0.6,0.8],'green',{ x: 185, y: 243},2.4); drawtriangleinverted('#svg1','Impact','#74469c',[0.7,0.6,0.8],'',{ x: 185, y: 243},2.4);
makeSvgRightClickable('svg1'); makeSvgRightClickable('svg1');
doLittleWhiteTriangle('svg2');
drawtriangle('#svg2','Roles','#008845',[0.5,0.6,0.5],'red', { x: 0, y: 100 },-0.7);
makeSvgRightClickable('svg2');
"> ">
<svg xmlns="http://www.w3.org/2000/svg" id="svg1" width="1000" height="1000"></svg> <svg xmlns="http://www.w3.org/2000/svg" id="svg1" width="1000" height="1000"></svg>

25
savesvg.js
View File

@ -25,8 +25,31 @@ function doBigWhiteTriangle(id){
svg.appendChild(triangle); svg.appendChild(triangle);
} }
function doLittleWhiteTriangle(){ function doLittleWhiteTriangle(id){
const svg = document.getElementById(id);
// Triangle settings
const sideLength = 369;
const centerX = 250;
const centerY = 350;
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);
} }