How can I change the color of certain elements of GoAT diagrams?

support
1

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?

2

This is not an Hugo topic.

  1. checkout GoAT project and ask there.

  2. use the CLI interface and create a SVG file, and modify it.

3

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.

4

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"].

5

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
6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.