SVG Colors

[Metty]

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

 

[Myhar]

Hier hast du eine Anleitung wie du verschiedene gradients in dein SVG bekommst (inklusive anschaulicher Beispiele): https://fvsch.com/svg-gradient-fill/

 

[Metty]

danke für die schnelle antwort.
aber blicke da nicht durch.
in die css habe ich das reingeschrieben.

.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.

<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]

Weshalb erstellt du die SVG nicht einfach in Inkscape?

<?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]

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]

Weshalb erstellt du die SVG nicht einfach in Inkscape?

<?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