ありがとうございます！
2 Likes
本当にありがとうございました！ 
wkstats seems broken for me (in the past hour)… Items → Wanikani is just showing a blank page and “Open Config”
Any recent change (or API change from Wanikani) that might have caused that?
EDIT: Showing Joyo/JLPT etc. all still works fine
4 Likes
I am seeing the same behaviour as well. Does not help you but let’s us know that it is something on the other end and not local to us. I did try clearing cache and doing a hard refresh.
2 Likes
I have the same problem. I checked the console and there is an error there.
1 Like
@rfindley I removed the svgs without inline styles as part of a tidy up (they all looked broken). The load_radical function on line 358 of dashboard.js specifically looks for the an svg without inline styles. Could you switch this to use the svg with inline styles? This should resolve the reported issue above.
The code is also indexing in an array that might be empty. Might i suggest using a guard ?.url
let url = item.data.character_images.filter((ci) => ci.content_type==='image/svg+xml' && !ci.metadata.inline_styles)[0]?.url
4 Likes
They work(ed), but they need the following styles added:
{
stroke-width:85; // You can change the font-weight with this
stroke:#000; // Specify a color here
fill:none;
stroke-linecap:square;
stroke-miterlimit:2;
}
The main reason for having the non-styled ones was for cases where you want to invert the color for dark/light background. Secondary reason was to support the ability to change the font-weight via stroke-width. But the SVGs with styles built in can be used with CSS overrides.
2 Likes
I’ve updated wkstats.com to use the styled-svg radicals. It seems to be working.
Next up… Ultimate Timeline, Self-Study, and Dashboard Progress Plus.
5 Likes
Sorry I didn’t expect these non styled versions to me used.
I am updating app to have one svg with css variables. I only have one css variable in use at the moment stroke: var(--color-text, #000). This should allow the color to be changed easily. I considered adding a variable for stroke-width and stroke-miterlimit, however some svgs have mixed stroke-miterlimit which doesn’t make it a good candidate for a variable. As the stroke-miterlimit is a function of miterLength / stroke-width i also thought that changing the stroke-width is not wise.
I have the svgs all switched over but not uploaded to wanikani yet. This will happen in the next week.
I will post back here once the new svgs are loaded and hopefully that will allow for easier themeing.
Yeah, stroke-width only works in a relatively narrow range… mostly toward being more bold. Some gaps start to show if you go much thinner.
Seems fixed now, good job all who did that!
Ahh… I think the other difference with the unstyled SVGs is that they have class="radical", which makes it easy to style the whole thing at once, rather than overriding multiple styles on sub-elements. I think Adobe Illustrator exported the styles into subclasses (.a, .b, and so on), and I didn’t want to override that.
Anyway… it looks like I still have some work to do on wkstats.com. The SVG radicals aren’t appearing due to the missing ‘radical’ class (from the unstyled SVG).
Not to tell you how to go about programming wkstats, but if it is helpful here is my plan for this tidy up task.
We have 2 ways of managing character images currently, and I am consolidating this. My plan is to use a web component and load the content much the same way you have but into a shadow DOM. Using the shadow DOM will ensure the styles and classes don’t leak out into the main document, and using the css variable will allow the styles to be overridden from the outside.
I note that wkstats has the issue of class c being overridden multiple times. likewise the id='a' exists multiple times which isn’t valid. I will keep you posted with my progress.
2 Likes
Interesting… It looks like WK is currently using the un-minimized version of the SVGs. The minimized version, which is generated by a script, replaces all of the ID attributes with <radical_name>_<id>. So, for example, on the “zombie” radical, instead of having id=“a”, it has id=“zombie_a”.
edit: But the shadow DOM is a cleaner solution anyway. I don’t think shadow DOM was well-known back when I wrote wkstats.
3 Likes
Why are they broken? Is it because you don<t see where the styling comes from? These imagesy look perfectly fine for me as long as I provide the missing styling.
I use these SVG in the item inspector script and I need the ability to style the image in various ways. I have found no way to use the SVG with inline styling. Using the !important css override doesn’t work for me because when I try the requested styling doesn’t get applied. I have no purpose for the built-in styling. Removing the svg without inline styling breaks my script without giving me an alternative.
I was able to get it to work with:
.xxxxx svg * {
}
where the “xxxxx” is some additional selectors that add extra weight. But you can use `!important" instead, as long you include the “*”.
It’s not an ideal solution since it uses a wildcard on the svgs, but it works because these svgs are pretty consistent.
1 Like
anyone know what happened to what now?
Is it just stroke colour that you are missing?
1 Like
No I also miss resizing the image. For color I need to set it to “currentcolor” because I have builtin support for both light and dark themes.
I try the css override hints given by @rfindley but no luck so far. This doesn’t work for me and I don’t understand what I do wrong.
I don’t understand why I need to jump through these hoops when the unstyled svg work just fine.