SVG Deeper Understanding in F3

Here is a very simple project that seems to show off the problems.

I tried to write in the TITLE for each tool what is happening with the three SVG tools on the page.

TOP - this is an SVG tool with the FILL color set to SECONDARY. Even with the svg-button class attached, nothing happens when you HOVER over it.

MIDDLE - default SVG from F3 with the svg-button class applied, correctly changing the colors to DANGER in the normal state and WARNING in the HOVER state.

BOTTOM - this is the partial from my website with the SVG embedded. It works fine in PREVIEW, but if you preview it in Safari, it does not work. Instead, it is drawn in black, not the colors used on the default SVG. It also has the svg-button class attached.

First thing I see – This project file has two Blacksmith tools on the page. Each had definitions that were duplicated. One Blacksmith tool per page.

You’re defining the Fill in two places – Once in Blacksmith using your svg-button class and once in the Tool’s settings. The Fill in the tool applies the styling to the tool’s Stacks ID + the svg element. Something like this in CSS:

#stacks_in_105-svg svg

Your CSS will not override that as your CSS is being applied differently. If you wish to style an SVG with Blacksmith then turn off the Fill mode in the SVG tool’s settings. Doesn’t make sense to style it in two locations anyway, IMHO.

See above for why this works.

I’m currently on my Monterey machine right now, but when I open that page in Safari it works as expected: CleanShot 2023-03-18 at 13.38.53 · CleanShot Cloud

So to test and make sure it wasn’t the OS I loaded your project on my Ventura laptop and previewed in Safari. Again, works here as expected: CleanShot 2023-03-18 at 13.41.26 · CleanShot Cloud

The bottom one in the partial still does not work for me even after I remove the duplicate Blacksmith.

Something clearly different on my machine.

At this point, I give up as I have invested way too much time on this, I will continue to use the Blueprint SVG as it behaves as expected.

Sorry for wasting your time on this problem.

Sorry @handshaper that I can’t replicate it. If I could I could troubleshoot it for you and find the issue. :disappointed::disappointed: