ändern SVG <circle><rect> Werte durch CSS

Ich habe diesen SVG-Codeändern SVG <circle><rect> Werte durch CSS

<pattern id="thirdPattern" x="0" y="5" width="40" height="40" patternUnits="userSpaceOnUse"> 
      <circle r="10" cx="15" cy="10" /> 
      </pattern>

Kann ich r, cx & cy Werte durch CSS zu ändern, genau wie diese

@keyframes move { 
    25% { 
     cx: 50%; 
     cy: 50%; 
     r: 60; 
    } 
}

oder diesen

#thirdPattern { 
      cx: 25; 
      cy: 25; 
      r: 50; 
}

Dieser Code funktioniert, aber der Code-Editor zeigt Fehler becuas e von rcxcy sind keine CSS-Eigenschaften.

Quelle

2016-09-11 MuhammadJ

Es gibt auch diese * "Kann ich r, cx & cy Werte über CSS ändern, genau so" * und die Antwort ist NEIN für die meisten Browser. Das ist keine Meinung. – Kaiido

Ok ... aber der zweite wäre immer noch meinungsbasiert und würde wahrscheinlich als solcher schnell geschlossen werden. –

Ich glaube nicht, dass die Frage nach dem "besten Weg" immer auf der Grundlage von Meinungen gestellt wird. Manchmal möchte jemand wirklich wissen, was der beste Weg ist, etwas zu tun. – MuhammadJ

Nicht in SVG 1.1, aber SVG 2 sollte dies unterstützen. Browser fügen nach und nach SVG 2-Fähigkeiten hinzu - Ihre Laufleistung kann variieren.

Quelle

2016-09-11 23:36:23

Also, es gibt keine Möglichkeit, SVG zu animieren Durch die Änderung der Werte so? – MuhammadJ

Sie können es mit JavaScript oder SMIL (verwenden Sie die FakeSMIL-Bibliothek für IE-Kompatibilität) - aber, nein, nicht CSS (zumindest Cross-Browser). –

ändern SVG <circle><rect> Werte durch CSS

Antwort

Verwandte Themen