So entfernen Sie Leerzeichen aus diesem SVG

zuyi Gepostet am Dev

zuyi

Diese SVG soll in einem kleinen Bereich angezeigt werden, damit der Leerraum um die SVG Probleme verursacht. Wie kann ich sie reduzieren, sodass nur der Lader vorhanden ist und kein Leerraum.

<svg width="200px"  height="200px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ellipsis" style="background: none;">
<!--circle(cx="16",cy="50",r="10")-->
<circle cx="84" cy="50" r="0" fill="#413fa4">
 <animate attributeName="r" 
          values="10;0;0;0;0" 
          keyTimes="0;0.25;0.5;0.75;1" 
          keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
          calcMode="spline" 
          dur="2.8s" 
          repeatCount="indefinite" 
          begin="0s"></animate>
<animate attributeName="cx" 
         values="84;84;84;84;84" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
         calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="0s"></animate>
</circle>
<circle cx="46.4254" cy="50" r="10" fill="#22b75b">
<animate attributeName="r" 
         values="0;10;10;10;0" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
         calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="-1.4s"></animate>
<animate attributeName="cx" 
         values="16;16;50;84;84" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
         calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="-1.4s"></animate>
</circle>
<circle cx="16" cy="50" r="8.94865" fill="#413fa4">
<animate attributeName="r" 
         values="0;10;10;10;0" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
         calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="-0.7s"></animate>
<animate attributeName="cx" 
         values="16;16;50;84;84" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"   calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="-0.7s"></animate>
         </circle>
<circle cx="84" cy="50" r="1.05135" fill="#22b75b">
<animate attributeName="r" 
         values="0;10;10;10;0" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
         calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="0s"></animate>
<animate attributeName="cx" 
         values="16;16;50;84;84" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"   calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="0s"></animate></circle>
<circle cx="80.4254" cy="50" r="10" fill="#413fa4">
<animate attributeName="r" 
         values="0;0;10;10;10" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"   calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="0s"></animate>
<animate attributeName="cx" 
         values="16;16;16;50;84" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
         calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="0s"></animate>
         </circle>
</svg>

Udhay Titus

Wenn Sie den cyWert ändern , 10wird unerwünschter Platz oben und unten entfernt

<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ellipsis" style="background: none;">
    <!--circle(cx="16",cy="10",r="10")-->
    <circle cx="84" cy="10" r="0" fill="#413fa4">
        <animate attributeName="r" values="10;0;0;0;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate>
        <animate attributeName="cx" values="84;84;84;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate>
    </circle>
    <circle cx="46.4254" cy="10" r="10" fill="#22b75b">
        <animate attributeName="r" values="0;10;10;10;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-1.4s"></animate>
        <animate attributeName="cx" values="16;16;50;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-1.4s"></animate>
    </circle>
    <circle cx="16" cy="10" r="8.94865" fill="#413fa4">
        <animate attributeName="r" values="0;10;10;10;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-0.7s"></animate>
        <animate attributeName="cx" values="16;16;50;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-0.7s"></animate>
    </circle>
    <circle cx="84" cy="10" r="1.05135" fill="#22b75b">
        <animate attributeName="r" values="0;10;10;10;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate>
        <animate attributeName="cx" values="16;16;50;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate>
    </circle>
    <circle cx="80.4254" cy="10" r="10" fill="#413fa4">
        <animate attributeName="r" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate>
        <animate attributeName="cx" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate>
    </circle>
</svg>

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am2021-01-7

Lass mich ein paar Worte sagen

0Kommentare

LoginNach der Teilnahme an der Überprüfung

Vorheriger Beitrag:Wenn Sie Daten von then () zurückgeben, wird Promise <void> anstelle von Promise <data> zurückgegeben

TOP Liste

Artikel

So entfernen Sie Leerzeichen aus diesem SVG

So entfernen Sie Leerzeichen aus diesem SVG

So legen Sie mit dem Interface Builder unterschiedliche führende Speicherplätze für unterschiedliche Geräte fest

Fügen Sie eine weitere Schaltfläche zu gwt Suggest Box hinzu

Wie konvertiere ich einen Vektor von Bytes (u8) in eine Zeichenfolge?

Wie kann ich in SCSS mehrere Klassen zu einer einzigen kombinieren?

Wie konvertiert man einen Datenrahmen im langen Format in eine Liste mit einem geeigneten Format?

Speichern Sie ein MPAndroidChart-Diagramm in einem Bild, ohne es in einer Aktivität anzuzeigen

Gruppieren Sie Datenrahmenspalten nach ihrem Datum (die Spaltentitel enthalten) und fassen Sie die Instanzen von Einsen und Nullen in R . zusammen

Tomcat - Leiten Sie den alten Kontextstamm zum neuen Kontextstamm um

Eclipse Oxygen - Projekte verschwinden

Wie wählt man Unterschiede mit drei Tabellen aus?

Tic Tac Toe-Spiel im React-Reset-Button funktioniert nicht

So berechnen Sie die Verfügbarkeit von Anwendungen (SLA)

ElasticSearch BulkShardRequest ist aufgrund von org.elasticsearch.common.util.concurrent.EsThreadPoolExecutor fehlgeschlagen

Wie kann ich den Kaskadenmodus global einstellen?

Python: Spalten mit demselben Namen zusammenführen, wobei der Mindestwert beibehalten wird

So erhalten Sie eine gleichmäßige Höhe für alle Eingabefelder

Wie erstelle ich einen neuen übergeordneten Knoten außerhalb der .ref (/ path) in der Firebase-Echtzeitdatenbank mithilfe von Cloud-Funktionen (Typescript)?

Was ist schneller: SUM über NULL oder über 0?

Wie kann ich eine verschachtelte Schleife mit lapply in R ersetzen?

Kann ich ein Tkinter-Canvas erstellen, das mehrere Zeilen in einem Text-Widget umfasst?

Ärgerliches Problem mit yaml, das ich nicht lösen kann