SVG - Füllen Rechteck mit Jet-Farbschema

Was ist der richtige Weg, um ein SVG-Rechteck mit Jet-Farbschema zu füllen? Die Verwendung mehrerer Stopps in linearGradient scheint nicht zu funktionieren.SVG - Füllen Rechteck mit Jet-Farbschema

Bearbeiten, ich versuche, ein Rechteck mit einem der folgenden Farbverlauf zu füllen.

Quelle

2016-04-22 Quang Thinh Ha

"jet Farbschema" ist kein Standard oder etwas, so dass ich die meisten Leute davon aus (wie ich) Haben Sie keine Ahnung, worauf Sie sich beziehen, können Sie genauer sagen, was Sie erreichen wollen? –

http://cresspahl.blogspot.com/2012/03/expanded-control-of-oktaves-colormap.html - Wenn ich das richtig verstehe, versuchst du einen Regenbogengradienten zu erstellen, der von Rot zu Blau wechselt und enthält die Farben dazwischen. Ist das richtig? – BSMP

@BSMP: Ja, das versuche ich hier zu erreichen. –

Ich habe den MDN-Code mit einem Regenbogen Beispiel

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients --> 

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> 
     <stop offset="0%" stop-color="#d30000"/> 
     <stop offset="30%" stop-color="#ffff05"/> 
     <stop offset="50%" stop-color="#05ff05"/> 
     <stop offset="70%" stop-color="#05ffff"/> 
     <stop offset="100%" stop-color="#041ae0"/> 
    </linearGradient> 
    </defs> 

    <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/> 

</svg>

in einer Geige: https://jsfiddle.net/9bmvr5hd/

Quelle

2016-04-22 16:44:55 jpopesculian

Der BbwrR Gradient ist das Beispiel in Mozilla's SVG - Gradients documentation verwendet:

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
     <linearGradient id="Gradient1"> 
 
     <stop class="stop1" offset="25%"/> 
 
     <stop class="stop2" offset="50%"/> 
 
     <stop class="stop3" offset="75%"/> 
 
     </linearGradient> 
 
     <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> 
 
     <stop offset="25%" stop-color="blue"/> 
 
     <stop offset="50%" stop-color="black" stop-opacity="0"/> 
 
     <stop offset="75%" stop-color="red"/> 
 
     </linearGradient> 
 
     <style type="text/css"><![CDATA[ 
 
     #rect1 { fill: url(#Gradient1); } 
 
     .stop1 { stop-color: blue; } 
 
     .stop2 { stop-color: black; stop-opacity: 0; } 
 
     .stop3 { stop-color: red; } 
 
     ]]></style> 
 
    </defs> 
 
    
 
    <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/> 
 
    <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/> 
 
    
 
</svg>

tauschte ich die Position der roten und blauen und justiert die Offset-Prozentsätze, um zu versuchen, um es so aussehen, wie dein Bild. Sie sollten nur die Farben ändern und Stopps für die anderen hinzufügen/entfernen können.

Quelle

2016-04-22 16:37:53 BSMP

SVG - Füllen Rechteck mit Jet-Farbschema

Antwort

Verwandte Themen