web-dev-qa-db-ger.com

Füllen Sie eine SVG-Form mit einem Farbverlauf

 Wavy shape with gradient

 wavy shape

 linear gradient

Wie kann ich einen linearen Farbverlauf und einen Schatten auf dieses Muster anwenden?

<svg viewbox="0 0 60 10">
  <pattern x="-8" id="waves" patternUnits="userSpaceOnUse" width="10" height="10">
    <path d="M0 10 V5 Q2.5 3.5 5 5 T10 5 V10" fill="#FFC338" />
  </pattern>
  <rect x="0" y="0" width="60" height="7" fill="url(#waves)" />
</svg>

csssvglinear-gradients
10
Shahid

Wie von Paul LeBeau kommentiert, müssen Sie die Wellenform in einen Pfad konvertieren. Dann können Sie die Wellenform mit einem linearen Farbverlauf füllen, wie in diesem Beispiel gezeigt:

<svg viewbox="7.5 0 60 10">
  <defs>
    <linearGradient id="gradient">
      <stop offset="5%" stop-color="#FFC338" />
      <stop offset="95%" stop-color="#FFEA68" />
    </linearGradient>
  </defs>
  <path fill="url(#gradient)" d="M0 10 V5 Q2.5 2.5 5 5 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 V10" />
</svg>

17
web-tiki

nicht genau was Sie suchen, aber versuchen Sie:

<svg viewbox="0 0 100 80">

   <defs>


     <filter id="f1" x="0" y="0" width="140%" height="200%">
        <feOffset result="offOut" in="SourceAlpha" dx="8" dy="6" />
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
     </filter>

    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>

      <pattern x="-8" id="waves" patternUnits="userSpaceOnUse" width="50" height="20">
        <path d="M0 10 V5 Q2.5 3.5 5 5 T10 5 V10" fill="url(#grad1)"   />
      </pattern>

   </defs>

      <rect x="0" y="3" width="200" height="20"  fill="url(#waves)"  filter="url(#f1)" />

</svg>

Bearbeiten Sie die numerischen Parameter einzeln, um den Effekt zu sehen.

0
Arif Burhan

Versuche Folgendes:

Platzieren Sie alle Verlaufs- und Musterdefinitionen in einem <defs>-Block . Nachdem der defs-Block geschlossen ist, platzieren Sie Ihre sichtbaren Inhalts-Tags.

0
Arif Burhan