CSS styling of text inside boxes

[mbrannstrom]

I love the new CSS styling feature. It would be great if it was possible to apply styling to text inside boxes (or other shapes).

In the following example, it would be nice to set the text color to e.g. white. (the filter works best in chrome)

+---------+
| Box {a} |
+---------+

# Legend:
a = {
  fill: darkred;
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}

E.g. with the syntax:

a:text = { fill: white; }

Or, perhaps even better, make the entire styling block into pure CSS:

# CSS:
.a { fill: darkred; filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); }
text.a { fill: white; filter: none; }
text { /* styling of any other text */ }

The <text> element would thus have the class="a" applied, if it is inside a box with that class.

See the current output below:

[mdg-utility]

I'd like to add, that if all text had a text class, we'd be able to set default styles. Piggy backing on this issue request, if the text is within an object, you could add a class called text_object_name in addition to the default text class.

So by default, it would look like so:
<text x="42" y="3628" class="text">Statistical</text>

Then, using the example from @mbrannstrom above, the text element would look like so:
<text x="18" y="7100" class="text text_a">Box</text>

The legend would look like:

# Legend:
a = {
  fill: darkred;
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}
text_a = {
  fill: white;
}

You could use the same/similar logic that you use to add the shape classes to the text elements within the shape.

If I wanted to style all text in the graphic, I'd use the following:

# Legend:
text = {
  fill: crimson;
}

[avivace]

Agree, this unfortunately breaks every rendered SVG on dark themes :/

[mdg-utility]

It just gives the capability to style rendered SVGs. It would be up to the user to add the appropriate CSS, but adding the class itself shouldn't break anything.

[adrien-n]

I think there is almost a work-around.

Consider

+----------------+
| Red {x}        |
+----------------+

The SVG will contain

<rect class="solid nofill x" ...></rect>
<text>Red</text

Therefore you can style the text using the + "adjacent" CSS selector:

rect.x + text {
  fill: red;
}

I don't know how to easily integrate that CSS however. My main use case for svgbob at the moment is probably going to involve discourse so it won't be possible to inject arbitrary CSS (for good reasons probably, unless nesting can help now). That means that will require be some support from svgbob directly.