Mirror
/
web-color-wheel
mirror of https://github.com/arantius/web-color-wheel.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Dynamic stylesheet workaround. 

Apparently Safari doesn't support `SVGStyleElement.sheet`.  And we don't
need that separate sheet anyway, so reduce to one and just use
`document.styleSheets[0]`.

Fixes #1
This commit is contained in:
Anthony Lieuallen 2022-11-22 08:47:41 -05:00
parent 620260f852
commit c514277e31
1 changed files with 4 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
colors.html
View File

@ -43,6 +43,7 @@ body {
svg {
clip-path: circle(300px at center);
}
polygon { stroke-width: 1px; }
.swatch {
border: 8px outset white;
@ -60,11 +61,7 @@ svg {
viewbox="0 0 1024 1024"
width="600"
xmlns="http://www.w3.org/2000/svg"
>
<style>
polygon { stroke-width: 1px; }
</style>
</svg>
></svg>
<!-- https://github.com/gorhill/Javascript-Voronoi -->
<script src="rhill-voronoi-core.min.js"></script>
@ -230,7 +227,7 @@ const cx = radius;
const cy = radius;
const svg = document.querySelector('svg');
const svgStyle = svg.querySelector('style').sheet;
const styleSheet = document.styleSheets[0];
// TODO: Select-able color categories, re-render wheel.
function renderWheel() {
@ -277,7 +274,7 @@ function renderWheel() {
svg.appendChild(c);
let rgb = `rgb(${r}, ${g}, ${b})`;
svgStyle.insertRule(`[data-color='${colorName}'] { fill: ${rgb}; stroke: ${rgb}; }`);
styleSheet.insertRule(`[data-color='${colorName}'] { fill: ${rgb}; stroke: ${rgb}; }`);
});
}
renderWheel();