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

Made background transparent

Browse Source
This commit is contained in:
Peter Edmond 2025-05-15 19:55:33 +01:00
parent 3831d04d2f
commit b1bc1b3ccd
2 changed files with 45 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
IndexUsingJS.html
View File

@ -13,11 +13,11 @@
font-family: sans-serif; font-family: sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: white; background-color: blue;
} }
svg { svg {
background: white; background: none;
display: block; display: block;
margin: auto; margin: auto;
} }
@ -51,10 +51,12 @@
} }
</style> </style>
</head> </head>
<body onload="let amber = '#ffbf00'; drawtriangle('#svg1','Roles','#316443',[0.5,0.6,0.5],'red', { x: 0, y: 350 },-0.7); <body onload="let amber = '#ffbf00';
drawtriangle('#svg1','Actions','#aeaeae',[0.1,0.6,0.5],'green',{ x: 370, y: 350 },2.3); doBigWhiteTriangle('svg1');
drawtriangle('#svg1','Approach','#d76a23',[0.3,0.6,0.5],amber,{ x: 185, y: 31 },1.4); drawtriangle('#svg1','Roles','#008845',[0.5,0.6,0.5],'red', { x: 0, y: 350 },-0.7);
drawtriangleinverted('#svg1','Impact','#9f84b8',[0.7,0.6,0.8],'green',{ x: 185, y: 244},2.4); 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);
drawtriangleinverted('#svg1','Impact','#74469c',[0.7,0.6,0.8],'green',{ x: 185, y: 243},2.4);
makeSvgRightClickable('svg1'); makeSvgRightClickable('svg1');
"> ">
<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>

37
savesvg.js
View File

@ -1,3 +1,40 @@
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) { function inlineStyles(svgElement) {
const allElements = svgElement.querySelectorAll('*'); const allElements = svgElement.querySelectorAll('*');
const computedStyles = window.getComputedStyle(svgElement); const computedStyles = window.getComputedStyle(svgElement);