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