Hugo’s GoAT ASCII diagrams rule, but there’s one thing that bothers me: the open circle line-end represented by o
is always filled with #fff, pure white. Other elements of the diagram, including the filled circle represented by *
, use a value called currentColor
which seems to match the font-color
value of the the parent element. How can I define the fill
of the open circle line-end as something other than white?
This is not an Hugo topic.
-
checkout GoAT project and ask there.
-
use the CLI interface and create a SVG file, and modify it.
CSS:
svg.diagram circle {
fill: blue;
}
But that will change all circles, not just those defined with “o
”.
To target circles filled with white:
svg.diagram circle[fill="#fff"] {
fill: blue;
}
Use named colors or hex.
Thank you. I didn’t realize CSS could select based on an embedded HTML property like that. In my case, the required selector was div.goat.svg-container > svg circle[fill="#fff"]
.
That is an attribute selector. Not the only one, BTW: You can also select for “attribute value begins with” or “attribute value contains”. MDN knows everything about that and other CSS selectors.
1 Like
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.