Womit lässt sich <center> bei SVG-Grafiken ersetzen?

[Rolf B]

Hallo fietur,

okay, also erstmal hab ich was gelernt: Attribute wie fill oder stroke, die ich auf einem svg oder g Element notiere, werden vererbt. Das war mir neu, und das ist etwas, was weder MDN noch unser Wiki verraten (zumindest habe ich das nicht entdeckt). In der SVG2 Spec hingegen steht an den Attributen eine "inherited" Information.

Und ich habe eine Ressource zur optimalen Data-URI Codierung für SVG Bilder gefunden. Allerdings war das auch schon 2015 Thema im Forum. Ich habe es jetzt im Wiki-Artikel zu Data-URIs eingebaut.

Exkurs Ende - vielleicht müssten wir mal klarstellen, was genau du tust.

• Du hast eine Tabellenzelle
• Darin zeigst Du 1-N Symbole an (vielleicht auch 0)
• Derzeit machst Du es so, dass Du für jedes Symbol ein div mit einer Klasse ins HTML stellst, und diese Klasse wählt im CSS eine Regel aus, die ein entsprechendes background-image auswählt?

Und weil Du mit divs arbeitest, nehme ich an, dass Du mehrere Symbole untereinander darstellst? Vier Symbole - vier Divs, jedes mit einer eigenen Klasse, die das Symbol als Hintergrundbild einfügt? Solange der Rest der Tabelle für einen Anwender, der die Seite nicht visuell aufnimmt, hinreichend viele Informationen hergibt, so dass er die Symbole zum Verständnis des Inhalts nicht benötigt, kann man das machen, denke ich.

FALLS aber die Symbole eine Zusatzinformation transportieren, die sich anderweit nicht erschließt, dann musst Du für nicht-sehende Anwender diese Zusatzinformation anders übermitteln. Beispielsweise als Text im div, der visuell versteckt sein kann. Das ist dann natürlich wieder mehr Markup.

Für den Fall ohne Zusatzinfo habe ich das mal so gemacht. Die Frage nach tabellarischen Daten oder nicht klammere ich dabei aus, das ist auch für die Fragestellung fast irrelevant. „Fast“ deshalb, weil man die Tabelle möglicherweise auch als Liste darstellen und dann den Symbolcontainer als Flexbox gestalten könnte.

<table>
<tr>
  <td>
    <div class="symbol1"></div>
  </td>
  <td>Das ist eine Tabellenzeile mit Symbol 1</td>
</tr>
<tr>
  <td>
    <div class="symbol2"></div>
  </td>
  <td>Das ist eine Tabellenzeile mit Symbol 1</td>
</tr>
<tr>
  <td>
    <div class="symbol1"></div>
    <div class="symbol2"></div>
  </td>
  <td>Das ist eine Tabellenzeile mit Symbol 1 und 2</td>
</tr>
</table>

Das ist das CSS:

table {
  border-collapse: collapse;
}
td {
  border: 1px solid black;
  padding: 0.2em 0.5em;
  vertical-align: top;
}
td:first-child {
  width: 5em;
  text-align: center;
}
td:first-child div {
  display: inline-block;
  width: 1.5em;
  aspect-ratio: 1/1;
  margin: 0 0.1em;
}
.symbol1 { 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='%23ff0000'%3E%3Crect x='0' y='0' width='10' height='10'/%3E%3C/svg%3E"); 
}
.symbol2 { 
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' stroke='red'%3e%3cpath d='M1%2c1L9%2c9M1%2c9L9%2c1'%3e%3c/path%3e%3c/svg%3e"); 
}

Sieht so aus:

Ist das das, wonach Du suchst?

Wenn die divs untereinander stehen sollen, lass den display:inline-block weg und ändere den margin der Symbol-Divs auf auto. Die Angabe einer width sorgt dafür, dass der auto-Margin sie zentriert. Der text-align:center auf dem td der ersten Spalte ist dann nicht mehr nötig.

Rolf