Antworten auf deine Fragen:
Neues Thema erstellen

SVG Colors

Metty

Nicht mehr ganz neu hier

Hallo liebe COMM,
kann man bei einer fill: funktion mehrere farben einbinden RAinbow effect wie zb hier per css normal mache ich das so.
background-image: -webkit-gradient(linear,right bottom,left top,from(#ff8a00),to(#da1b60));
background-image: linear-gradient(to top left,#ff8a00,#da1b60);
wie kriege ich diesen code da eingebaut fill: #66cc99;

das habe ich gemacht aber zeigt mir dann nur noch schwarz an fill: linear-gradient(to top left,#ff8a00,#da1b60);
wer super wenn jemand ahnung hat wie ich deisen code farbcode reinbekomme.
MFG metty
 

Metty

Nicht mehr ganz neu hier

danke für die schnelle antwort.
aber blicke da nicht durch:confused:.
in die css habe ich das reingeschrieben.
Code:
.profile svg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.profile .st0, .profile .st1 {
  fill: url(#gradient-horizontal) #da1b60;
      --color-stop-1: #ff8a00;
  --color-stop-2: #da1b60;
}


und in die html.
HTML:
<svg version="1.1" viewBox="0 0 350 350" style="fill: url(#gradient-horizontal);">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -9" result="cm" />
    </filter>
  </defs>
<g filter="url(#goo)" > 
  <circle id="main_circle" style="fill: url(#gradient-horizontal);" class="st0" cx="171.5" cy="175.6" r="130"/>
  <circle id="circle" class="bubble0 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble1 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble2 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble3 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble4 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble5 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble6 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble7 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble8 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble9 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble10 st1" cx="171.5" cy="175.6" r="122.7"/>
</g> 
</svg>

wieso klappt das nicht.

ich möchte doch nur diesen code da drin haben farbcode rainbow effect.
background: -webkit-gradient(linear,right bottom,left top,from(#ff8a00),to(#da1b60));
background: linear-gradient(to top left,#ff8a00,#da1b60);
 

noltehans

Aktives Mitglied

Weshalb erstellt du die SVG nicht einfach in Inkscape?






Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   id="svg33"
   style="fill: url(#gradient-horizontal);"
   viewBox="0 0 350 350"
   version="1.1">
  <style
     id="style4580">
.class1 {
    fill:url(#linearGradient4578);
    fill-opacity:1;
}</style>
  <metadata
     id="metadata37">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs7">
    <linearGradient
       id="linearGradient4566">
      <stop
         id="stop4562"
         offset="0"
         style="stop-color:#808000;stop-opacity:1;" />
      <stop
         style="stop-color:#ff8a00;stop-opacity:0.97196263"
         offset="0.20283799"
         id="stop4570" />
      <stop
         id="stop4572"
         offset="0.79487962"
         style="stop-color:#da1b60;stop-opacity:1" />
      <stop
         id="stop4564"
         offset="1"
         style="stop-color:#808000;stop-opacity:0;" />
    </linearGradient>
    <filter
       id="goo">
      <feGaussianBlur
         id="feGaussianBlur2"
         result="blur"
         stdDeviation="8"
         in="SourceGraphic" />
      <feColorMatrix
         id="feColorMatrix4"
         result="cm"
         values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -9"
         mode="matrix"
         in="blur" />
    </filter>
    <linearGradient
       y2="21.419941"
       x2="324.12378"
       y1="328.65466"
       x1="18.876205"
       gradientUnits="userSpaceOnUse"
       id="linearGradient4578"
       xlink:href="#linearGradient4566" />
  </defs>
  <g
     filter="url(#goo)"
     id="g31"
     style="    "
     class="class1">
    <circle
       id="main_circle"
       style="fill:url(#linearGradient4578);fill-opacity:1"
       class="st0"
       cx="171.5"
       cy="175.6"
       r="130" />
    <circle
       id="circle"
       class="bubble0 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle11"
       class="bubble1 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle13"
       class="bubble2 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle15"
       class="bubble3 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle17"
       class="bubble4 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle19"
       class="bubble5 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle21"
       class="bubble6 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle23"
       class="bubble7 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle25"
       class="bubble8 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle27"
       class="bubble9 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle29"
       class="bubble10 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
  </g>
</svg>
 

Myhar

Hat es drauf

Du definierst in deinem SVG einen fill-style: style="fill: url(#gradient-horizontal);". diese URL zeigt zu einer ID (gradient-horizontal), hast du die auch in dein HTML integriert, so wie bei den verlinkten Beispielen angegeben?
 

Metty

Nicht mehr ganz neu hier

Weshalb erstellt du die SVG nicht einfach in Inkscape?






Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   id="svg33"
   style="fill: url(#gradient-horizontal);"
   viewBox="0 0 350 350"
   version="1.1">
  <style
     id="style4580">
.class1 {
    fill:url(#linearGradient4578);
    fill-opacity:1;
}</style>
  <metadata
     id="metadata37">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs7">
    <linearGradient
       id="linearGradient4566">
      <stop
         id="stop4562"
         offset="0"
         style="stop-color:#808000;stop-opacity:1;" />
      <stop
         style="stop-color:#ff8a00;stop-opacity:0.97196263"
         offset="0.20283799"
         id="stop4570" />
      <stop
         id="stop4572"
         offset="0.79487962"
         style="stop-color:#da1b60;stop-opacity:1" />
      <stop
         id="stop4564"
         offset="1"
         style="stop-color:#808000;stop-opacity:0;" />
    </linearGradient>
    <filter
       id="goo">
      <feGaussianBlur
         id="feGaussianBlur2"
         result="blur"
         stdDeviation="8"
         in="SourceGraphic" />
      <feColorMatrix
         id="feColorMatrix4"
         result="cm"
         values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -9"
         mode="matrix"
         in="blur" />
    </filter>
    <linearGradient
       y2="21.419941"
       x2="324.12378"
       y1="328.65466"
       x1="18.876205"
       gradientUnits="userSpaceOnUse"
       id="linearGradient4578"
       xlink:href="#linearGradient4566" />
  </defs>
  <g
     filter="url(#goo)"
     id="g31"
     style="    "
     class="class1">
    <circle
       id="main_circle"
       style="fill:url(#linearGradient4578);fill-opacity:1"
       class="st0"
       cx="171.5"
       cy="175.6"
       r="130" />
    <circle
       id="circle"
       class="bubble0 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle11"
       class="bubble1 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle13"
       class="bubble2 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle15"
       class="bubble3 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle17"
       class="bubble4 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle19"
       class="bubble5 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle21"
       class="bubble6 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle23"
       class="bubble7 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle25"
       class="bubble8 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle27"
       class="bubble9 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
    <circle
       id="circle29"
       class="bubble10 st1"
       cx="171.5"
       cy="175.6"
       r="122.7"
       style="fill:url(#linearGradient4578);fill-opacity:1" />
  </g>
</svg>


Super vielen vielen dank :danke:
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben