suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Wie kann man eine SVG-Datei vertikal zu einer Tabellenzelle ausdehnen?

Ich habe eine einfache Tabelle mit SVG in den Tabellenzellen: 

<html>
<body>
<table style="width: 8em;">
<tr>
<td style="border: 1px solid black;">
<svg viewBox="0 0 1 1" style="width: 1.37em;" preserveAspectRatio="none">
<polyline points="0,0 1,0.5 0,1" style="fill: blue;"></polyline>
</svg>
</td>
<td style="border: 1px solid black;">Lorem ipsum dolor sit amet</td>
</tr>
</table>
</body>
</html>

Wie Sie sehen, sind andere Zellen in der Zeile möglicherweise zu lang, was dazu führt, dass sich die Zeilenhöhe im Vergleich zum Standardwert ändert und eine Lücke zwischen der SVG-Datei und ihren oberen und unteren Rändern entsteht.

Wie lässt sich eine SVG-Datei automatisch strecken oder verkleinern, um ihre Zellen vertikal zu füllen, ohne ihre horizontalen Abmessungen zu ändern?

P粉521697419P粉521697419477 Tage vor525

Antworte allen(1)Ich werde antworten

  • P粉952365143

    P粉9523651432023-09-08 10:12:23

    一种解决方案是将其设为背景图像。您可以将 SVG 代码放入单独的文件中，也可以对其进行百分比编码在数据 URI 中使用。

    <table style="width: 8em;">
<tr>
<td style="border: 1px solid black; width: 1.37em; background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1 1%22 preserveAspectRatio=%22none%22%3E%3Cpolyline points=%220,0 1,0.5 0,1%22 style=%22fill: blue;%22%3E%3C/polyline%3E%3C/svg%3E');"></td>
<td style="border: 1px solid black;">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</td>
</tr>
</table>

    Antwort
    0
  • StornierenAntwort