Jens_rie: SVG mit farbverlauf UND transparenz

SELF-Forum

SVG mit farbverlauf UND transparenz

Jens_rie
– Informationen zu den Bewertungsregeln

also, zwar eine svg
aber das ist css so ähnlich das es - hoffe ich - passt

mein problem ist ein verständnisproblem
ich möchte das das obenliegende Rechteck transparent
mit einem Farbverlauf nach Außen wird,
sozusagen transparenz und farbverlauf kombiniert ..
allerdings hängts bei mir grad, vielleicht kannmir jemand helfen

das ganze soll mal für einen alternativen schattenwurf für div-kästen herhalten

vielen dank schonmal

folgender Code (komplette test.svg)

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
  <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
]>
<!-- SVG - Learning By Coding - http://www.datenverdrahten.de/svglbc/ -->
<!--    Author: Dr. Thomas Meinike 12/02 - thomas@handmadecode.de     -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>

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

</defs>

<title>SVG - Test</title>
  <desc>Beispiel mit Farbverlauf und Transparenz</desc>
  <text x="20" y="30" style="fill: rgb(0, 0, 0); font-size: 24px;">
    Elemente linearGradient | stop</text>

<rect x="10" y="50" width="430" rx="5" ry="5" height="65"
          style="fill: #FF0; stroke: #00C; stroke-width: 2px"/>
  <rect x="20" y="60" width="400" height="40" style="fill: url(#lingra1);"/>
</svg>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. SVG mit farbverlauf UND transparenz

    svg4you
    – Informationen zu den Bewertungsregeln

    Tach Jens_rie,

      

>       <stop offset="1" style="stop-color: rgb(255, 255, 255);" stop-opacity="100%" />

    ^^^^
    Opacity-Werte laufen numerisch von 0-1 und werden nicht in Prozent angegeben. Das gilt für alle Deckkraft-Eigenschaften: opacity, fill-opacity, stroke-opacity, stop-opacity, flood-opacity.

    Probiere es also mit Werten < 1, wenn der Gradient teiltransparent verlaufen soll.

    Man liest sich,
    svg4you

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln