Ich versuche, einen Farbverlauf auf ein SVG- rect
Element anzuwenden .
Derzeit verwende ich das fill
Attribut. In meiner CSS-Datei:
rect {
cursor: pointer;
shape-rendering: crispEdges;
fill: #a71a2e;
}
Und das rect
Element hat die richtige Füllfarbe, wenn es im Browser angezeigt wird.
Ich möchte jedoch wissen, ob ich diesem Element einen linearen Farbverlauf zuweisen kann.
css
svg
gradient
linear-gradients
Hrishikesh Choudhari
quelle
quelle
fill
:fill: url(../js/gradient.svg#MyGradient);
. Ist das der richtige Weg?fill: linear-gradient (...)
?"fill
erfordert eine,<paint>
die um die CSS2-<color>
Klasse herum aufgebaut ist . Mit anderen Worten, diese Antwort ist derzeit die einzige Möglichkeit, dies über CSS zu tun, wenn ich diesen Kommentar schreibe. Sie müssen einlinearGradient
Element hinzufügen . Wenn man den w3-Arbeitsentwurf für SVG2 durchläuft , scheint es, dass die Unterstützung fürlinear-gradient
die Füll-CSS-Regel es nicht in die Spezifikation geschafft hat und möglicherweise nicht schafft .gradientTransform
Attribut)2019 Antwort
Mit brandneuen CSS-Eigenschaften können Sie mit Variablen aka noch mehr Flexibilität haben
custom properties
Legen Sie einfach eine benannte Variable für jede Variable
stop
im Verlauf fest und passen Sie sie dann in CSS nach Ihren Wünschen an. Sie können ihre Werte sogar dynamisch mit Javascript ändern, wie zum Beispiel:quelle
Aufbauend auf dem, was Finesse geschrieben hat, ist hier eine einfachere Möglichkeit, das SVG anzuvisieren und seinen Gradienten zu ändern.
Folgendes müssen Sie tun:
Einige Vorteile der Verwendung von Klassen anstelle von
:nth-child
sind, dass es nicht betroffen ist, wenn Sie Ihre Stopps neu anordnen. Außerdem wird die Absicht jeder Klasse klar - Sie werden sich fragen, ob Sie für das erste oder das zweite Kind eine blaue Farbe benötigen.Ich habe es auf allen Chrome, Firefox und IE11 getestet:
Ein bearbeitbares Beispiel finden Sie hier: https://jsbin.com/gabuvisuhe/edit?html,css,output
quelle
Hier ist eine Lösung, bei der Sie einen Verlauf hinzufügen und seine Farben nur mit CSS ändern können:
quelle
Vielen Dank an alle für Ihre präzisen Antworten.
Mit dem SVG in einem Schattendom füge ich die 3 linearen Verläufe hinzu, die ich innerhalb des SVG innerhalb von a benötige. Ich platziere die CSS-Füllregel auf der Webkomponente und die Vererbung oder Füllung erledigt den Job.
siehe meinen Test im Codepen
Das erste ist normales SVG, das zweite befindet sich in einem Schattendom.
quelle
So setzen Sie einen linearGradient für ein Zielelement :
quelle