Ich habe diese Codezeile in meinem Projekt, die einen bestimmten Prozentsatz generiert und im Dashboard anzeigt.

   <text
          className="netProfit-circle-text"
          x="50%"
          y="50%"
          dy=".2em"
          textAnchor="middle"
        >
          {`${this.state.percentage}%`}
        </text>

Ich möchte in der Lage sein, das "%" zu formatieren und seine Größe mithilfe von CSS zu ändern. Wie kann ich das machen? Danke im Voraus.

Grüße.

1
Saif 16 Feb. 2020 im 15:41

3 Antworten

Beste Antwort

Sie können das Element tspan verwenden, um den Teil % zu verpacken. Das tspan -Element kann so gestaltet werden, dass es optisch anders aussieht als der Rest des text -Inhalts. Link zu MDN

<tspan>%</tspan>

1
Atanas Atanasov 16 Feb. 2020 im 13:05

Ja es ist möglich. Sie können es als zwei verschiedene jsx Elemente wie folgt rendern:

    <text
      className="netProfit-circle-text"
      x="50%"
      y="50%"
      dy=".2em"
      textAnchor="middle"
    >
      <text>{this.state.percentage}</text>
      <text className="per-color">%</text>
    </text>

Arbeitsbeispiel: https://codesandbox.io/s/hungry-leftpad-lue55.

1
Anuj Shah 16 Feb. 2020 im 12:57

Sie können das % einfach in ein <span> mit einer Klasse einschließen:

<text
    className="netProfit-circle-text"
    x="50%"
    y="50%"
    dy=".2em"
    textAnchor="middle"
>
    {this.state.percentage}
    <span class="percentage">%</span>
</text>

Und fügen Sie dann einige Stile hinzu:

span.percentage {
  ...
}
1
johannchopin 16 Feb. 2020 im 12:51