Gunther: Strahlen nach außen hin transparent werden lassen

Hallo werte Selfgemeinde!

Ich bin ein absoluter Noob wenn es um Vektorgrafiken, speziell SVG, geht.
Von daher bitte Nachsicht üben - danke! ;-)

Ich habe folgende Grafik:

  
<?xml version="1.0" encoding="utf-8"?>  
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="500" height="500" xml:space="preserve" preserveAspectRatio="xMidYMid meet">  
	<polygon points="572.223,-387 500,499.999 427.777,-386.999 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon4" style="opacity:0.2" />  
	<polygon points="871.238,-308.807 500,499.999 735.504,-358.209 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon6" style="opacity:0.2" />  
	<polygon points="1125.478,-133.059 500,499.999 1014.826,-225.906 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon8" style="opacity:0.2" />  
	<polygon points="1304.275,119.045 500,499.999 1232.053,-6.048 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon10" style="opacity:0.2" />  
	<polygon points="1386.065,417.098 500,499.999 1360.982,274.847 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon12" style="opacity:0.2" />  
	<polygon points="1360.982,725.149 500,499.999 1386.064,582.898 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon14" style="opacity:0.2" />  
	<polygon points="1232.053,1006.044 500,499.999 1304.275,880.951 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon16" style="opacity:0.2" />  
	<polygon points="1014.826,1225.902 500,499.999 1125.479,1133.055 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon18" style="opacity:0.2" />  
	<polygon points="735.505,1358.206 500,499.999 871.238,1308.803 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon20" style="opacity:0.2" />  
	<polygon points="427.778,1386.996 500,499.999 572.223,1386.996 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon22" style="opacity:0.2" />  
	<polygon points="128.762,1308.803 500,499.999 264.496,1358.205 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon24" style="opacity:0.2" />  
	<polygon points="-125.477,1133.055 500,499.999 -14.826,1225.902 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon26" style="opacity:0.2" />  
	<polygon points="-304.274,880.951 500,499.999 -232.052,1006.044 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon28" style="opacity:0.2" />  
	<polygon points="-386.064,582.898 500,499.999 -360.981,725.148 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon30" style="opacity:0.2" />  
	<polygon points="-360.981,274.847 500,499.999 -386.063,417.098 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon32" style="opacity:0.2" />  
	<polygon points="-232.051,-6.049 500,499.999 -304.273,119.045 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon34" style="opacity:0.2" />  
	<polygon points="-14.825,-225.907 500,499.999 -125.476,-133.059 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon36" style="opacity:0.2" />  
	<polygon points="264.498,-358.211 500,499.999 128.763,-308.807 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon38" style="opacity:0.2" />  
</svg>  

Das sieht dann so aus: SVG Grafik

Jetzt würde ich gerne die Strahlen nach außen hin transparent werden lassen.
Wie mach' ich das?

Ich hatte die Frage auch schon bei stackoverflow gestellt.

Die dortige Antwort schlägt die Verwendung von <radialGradient> für die Polygone vor. Das führt aber nicht unbedingt zum gewünschten Ergebnis, da damit kein linearer Transparenzverlauf erzielt wird.

Und <linearGradient> hat das "Problem", dass x1,y1 und x2,y2 ja für jedes Polygon unterschiedlich sein müssten.

Gibt es dafür eine möglichst einfache Lösung?

Besten Dank im Voraus!

Gruß Gunther

PS: Falls es hilfreich ist - ich habe neben einem "normalen" Editor auch Inkscape und CorelDraw X5 zur Verfügung (kenne mich allerdings, wie eingangs bereits erwähnt, mit beiden nicht besonders gut aus).

  1. Wie mach' ich das?

    http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement

    Und <linearGradient> hat das "Problem", dass x1,y1 und x2,y2 ja für jedes Polygon unterschiedlich sein müssten.

    Gibt es dafür eine möglichst einfache Lösung?

    Ein Script?

    1. Hi,

      Ein Script?

      ... ist keine Option! ;-)
      Entweder direkt in der SVG Datei, oder per CSS.

      Gruß Gunther

      1. Ein Script?

        ... ist keine Option! ;-)
        Entweder direkt in der SVG Datei, oder per CSS.

        Das kannst du ja in die SVG Datei schreiben.

        1. Hi!

          Ein Script?

          ... ist keine Option! ;-)
          Entweder direkt in der SVG Datei, oder per CSS.
          Das kannst du ja in die SVG Datei schreiben.

          Bleibt sich aber doch egal, ob ich es in die SVG Datei oder in die HTML Datei oder in eine externe Datei schreibe - ohne aktiviertes Javascript im Browser "funktioniert" es dann nicht. Und ich möchte es eben nicht von JS abhängig machen.

          Aber vielleicht hast du ja einen Tipp für mich, wie ich "formeltechnisch" die notwendigen Parameter für <linearGradient> berechnen kann?

          Gruß Gunther

          1. Ok, dann nimm immer das gleiche polygon, und drehe es so wie du es brauchst!

            <?xml version="1.0" encoding="utf-8"?>
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="500" height="500" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
              <defs>
                <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" style=";stop-opacity:0" />
                  <stop offset="100%" style="stop-opacity:1" />
                </linearGradient>
              </defs>
              <g transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)">
                <g>
                  <polygon points="572.223,-387 500,499.999 427.777,-386.999 "        id="polygon4" style="opacity:0.2" fill="url(#grad1)" />
                </g>
                <g transform="rotate(20 500 499.999)">
                  <polygon points="572.223,-387 500,499.999 427.777,-386.999 "  id="polygon6" style="opacity:0.2" fill="url(#grad1)" />
                </g>
                <g transform="rotate(40 500 499.999)">
                  <polygon points="572.223,-387 500,499.999 427.777,-386.999 "  id="polygon8" style="opacity:0.2" fill="url(#grad1)" />
                </g>
                <g transform="rotate(60 500 499.999)">
                  <polygon points="572.223,-387 500,499.999 427.777,-386.999 "     id="polygon10" style="opacity:0.2" fill="url(#grad1)" />
                </g>
                <g transform="rotate(80 500 499.999)">
                  <polygon points="572.223,-387 500,499.999 427.777,-386.999 "    id="polygon12" style="opacity:0.2" fill="url(#grad1)" />
                </g>
                <g transform="rotate(100 500 499.999)">
                  <polygon points="572.223,-387 500,499.999 427.777,-386.999 "    id="polygon14" style="opacity:0.2" fill="url(#grad1)" />
                </g>
                <g transform="rotate(120 500 499.999)">
                  <polygon points="572.223,-387 500,499.999 427.777,-386.999 "   id="polygon16" style="opacity:0.2" fill="url(#grad1)" />
                </g>
                <g transform="rotate(140 500 499.999)">
                  <polygon points="572.223,-387 500,499.999 427.777,-386.999 "  id="polygon18" style="opacity:0.2" fill="url(#grad1)" />
                </g>
                <g transform="rotate(160 500 499.999)">
                  <polygon points="572.223,-387 500,499.999 427.777,-386.999 "    id="polygon20" style="opacity:0.2" fill="url(#grad1)" />
                </g>
                <g transform="rotate(180 500 499.999)">
                  <polygon points="572.223,-387 500,499.999 427.777,-386.999 "    id="polygon22" style="opacity:0.2" fill="url(#grad1)" />
                </g>
                <g transform="rotate(200 500 499.999)">
                  <polygon points="572.223,-387 500,499.999 427.777,-386.999 "    id="polygon24" style="opacity:0.2" fill="url(#grad1)" />
                </g>
                <g transform="rotate(220 500 499.999)">
                  <polygon points="572.223,-387 500,499.999 427.777,-386.999 "   id="polygon26" style="opacity:0.2" fill="url(#grad1)" />
                </g>
                <g transform="rotate(240 500 499.999)">
                  <polygon points="572.223,-387 500,499.999 427.777,-386.999 "   id="polygon28" style="opacity:0.2" fill="url(#grad1)" />
                </g>
                <g transform="rotate(260 500 499.999)">
                  <polygon points="572.223,-387 500,499.999 427.777,-386.999 "    id="polygon30" style="opacity:0.2" fill="url(#grad1)" />
                </g>
                <g transform="rotate(280 500 499.999)">
                  <polygon points="572.223,-387 500,499.999 427.777,-386.999 "    id="polygon32" style="opacity:0.2" fill="url(#grad1)" />
                </g>
                <g transform="rotate(300 500 499.999)">
                  <polygon points="572.223,-387 500,499.999 427.777,-386.999 "     id="polygon34" style="opacity:0.2" fill="url(#grad1)" />
                </g>
                <g transform="rotate(320 500 499.999)">
                  <polygon points="572.223,-387 500,499.999 427.777,-386.999 "   id="polygon36" style="opacity:0.2" fill="url(#grad1)" />
                </g>
                <g transform="rotate(340 500 499.999)">
                  <polygon points="572.223,-387 500,499.999 427.777,-386.999 "    id="polygon38" style="opacity:0.2" fill="url(#grad1)" />
                </g>
              </g>

            </svg>

            Aber vielleicht hast du ja einen Tipp für mich, wie ich "formeltechnisch" die notwendigen Parameter für <linearGradient> berechnen kann?

            Was meinst du?

            1. Hi!

              Ok, dann nimm immer das gleiche polygon, und drehe es so wie du es brauchst!

              Perfekt! Das ist also das, wonach ich gesucht habe ...!
              So simple, wenn man es einmal weiß ... ;-)

              Aber vielleicht hast du ja einen Tipp für mich, wie ich "formeltechnisch" die notwendigen Parameter für <linearGradient> berechnen kann?

              Was meinst du?

              Hat sich ja dann erledigt. Ich wollte jedes Polygon entsprechend seiner Lage/ Orientierung mit einem entsprechenden <linearGradient> und Opacity erstellen.

              Besten Dank für deine Hilfe!

              Gruß Gunther

              1. Hat sich ja dann erledigt. Ich wollte jedes Polygon entsprechend seiner Lage/ Orientierung mit einem entsprechenden <linearGradient> und Opacity erstellen.

                Wäre ja auch gegangen

                <?xml version="1.0" encoding="utf-8"?>  
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="500" height="500" xml:space="preserve" preserveAspectRatio="xMidYMid meet">  
                  <g id="g1" transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)">  
                    <polygon points="572.223,-387 500,499.999 427.777,-386.999 " id="polygon4" style="opacity:0.2"/>  
                    <polygon points="871.238,-308.807 500,499.999 735.504,-358.209 " id="polygon6" style="opacity:0.2" />  
                    <polygon points="1125.478,-133.059 500,499.999 1014.826,-225.906 " id="polygon8" style="opacity:0.2" />  
                    <polygon points="1304.275,119.045 500,499.999 1232.053,-6.048 " id="polygon10" style="opacity:0.2" />  
                    <polygon points="1386.065,417.098 500,499.999 1360.982,274.847 " id="polygon12" style="opacity:0.2" />  
                    <polygon points="1360.982,725.149 500,499.999 1386.064,582.898 " id="polygon14" style="opacity:0.2" />  
                    <polygon points="1232.053,1006.044 500,499.999 1304.275,880.951 " id="polygon16" style="opacity:0.2" />  
                    <polygon points="1014.826,1225.902 500,499.999 1125.479,1133.055 " id="polygon18" style="opacity:0.2" />  
                    <polygon points="735.505,1358.206 500,499.999 871.238,1308.803 " id="polygon20" style="opacity:0.2" />  
                    <polygon points="427.778,1386.996 500,499.999 572.223,1386.996 " id="polygon22" style="opacity:0.2" />  
                    <polygon points="128.762,1308.803 500,499.999 264.496,1358.205 " id="polygon24" style="opacity:0.2" />  
                    <polygon points="-125.477,1133.055 500,499.999 -14.826,1225.902 " id="polygon26" style="opacity:0.2" />  
                    <polygon points="-304.274,880.951 500,499.999 -232.052,1006.044 " id="polygon28" style="opacity:0.2" />  
                    <polygon points="-386.064,582.898 500,499.999 -360.981,725.148 " id="polygon30" style="opacity:0.2" />  
                    <polygon points="-360.981,274.847 500,499.999 -386.063,417.098 " id="polygon32" style="opacity:0.2" />  
                    <polygon points="-232.051,-6.049 500,499.999 -304.273,119.045 " id="polygon34" style="opacity:0.2" />  
                    <polygon points="-14.825,-225.907 500,499.999 -125.476,-133.059 " id="polygon36" style="opacity:0.2" />  
                    <polygon points="264.498,-358.211 500,499.999 128.763,-308.807 " id="polygon38" style="opacity:0.2" />  
                  </g>  
                  <script>  
                  //<![CDATA[  
                    var svgroot=document.documentElement;  
                    var polygons=document.getElementsByTagName("polygon");  
                    var d = document.createElementNS("http://www.w3.org/2000/svg", "defs");  
                    for (var i =0 ; i < polygons.length; ++i) {  
                      var lg = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");  
                      lg.x1.baseVal.newValueSpecifiedUnits(lg.x1.baseVal.SVG_LENGTHTYPE_NUMBER, polygons[i].points.getItem(1).x);  
                      lg.y1.baseVal.newValueSpecifiedUnits(lg.y1.baseVal.SVG_LENGTHTYPE_NUMBER, polygons[i].points.getItem(1).y);  
                      lg.x2.baseVal.newValueSpecifiedUnits(lg.y1.baseVal.SVG_LENGTHTYPE_NUMBER, (polygons[i].points.getItem(0).x + polygons[i].points.getItem(2).x) / 2);  
                      lg.y2.baseVal.newValueSpecifiedUnits(lg.y1.baseVal.SVG_LENGTHTYPE_NUMBER, polygons[i].points.getItem(0).y == polygons[i].points.getItem(2).y ? polygons[i].points.getItem(0).y : ((polygons[i].points.getItem(0).x + polygons[i].points.getItem(2).x) / -2) * ((polygons[i].points.getItem(0).x - polygons[i].points.getItem(2).x) / (polygons[i].points.getItem(0).y - polygons[i].points.getItem(2).y))  
                        + (polygons[i].points.getItem(0).x * polygons[i].points.getItem(0).x - polygons[i].points.getItem(2).x * polygons[i].points.getItem(2).x + polygons[i].points.getItem(0).y * polygons[i].points.getItem(0).y - polygons[i].points.getItem(2).y * polygons[i].points.getItem(2).y)  
                        / (2 * (polygons[i].points.getItem(0).y - polygons[i].points.getItem(2).y)));  
                      lg.setAttribute("gradientUnits", "userSpaceOnUse");  
                      lg.id="grad"+i;  
                      polygons[i].setAttribute("fill", "url(#grad" + i + ")");  
                      var s0 = document.createElementNS("http://www.w3.org/2000/svg", "stop");  
                      s0.setAttribute("offset", "0");  
                      s0.setAttribute("stop-opacity", "1");  
                      lg.appendChild(s0);  
                      var s1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");  
                      s1.setAttribute("offset", "1");  
                      s1.setAttribute("stop-opacity", "0");  
                      lg.appendChild(s1);  
                      d.appendChild(lg);  
                    }  
                    var g1 = document.getElementById("g1");  
                    g1.appendChild(d);  
                  //]]>  
                  </script>  
                </svg>
                

                Wobei mir dabei auch aufgefallen ist, daß man das ja auch so hätte lösen können

                <?xml version="1.0" encoding="utf-8"?>  
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="500" height="500" xml:space="preserve" preserveAspectRatio="xMidYMid meet">  
                  <g id="g1" transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)">  
                    <defs>  
                      <radialGradient id="grad1" cx="500" cy="499.999" r="887" fx="500" fy="499.999"  gradientUnits="userSpaceOnUse">  
                        <stop offset="0%" stop-opacity="1" />  
                        <stop offset="100%" stop-opacity="0" />  
                      </radialGradient>  
                    </defs>  
                  
                    <polygon points="572.223,-387 500,499.999 427.777,-386.999 " id="polygon4" style="opacity:0.2" fill="url(#grad1)"/>  
                    <polygon points="871.238,-308.807 500,499.999 735.504,-358.209 " id="polygon6" style="opacity:0.2" fill="url(#grad1)"/>  
                    <polygon points="1125.478,-133.059 500,499.999 1014.826,-225.906 " id="polygon8" style="opacity:0.2" fill="url(#grad1)"/>  
                    <polygon points="1304.275,119.045 500,499.999 1232.053,-6.048 " id="polygon10" style="opacity:0.2" fill="url(#grad1)"/>  
                    <polygon points="1386.065,417.098 500,499.999 1360.982,274.847 " id="polygon12" style="opacity:0.2" fill="url(#grad1)"/>  
                    <polygon points="1360.982,725.149 500,499.999 1386.064,582.898 " id="polygon14" style="opacity:0.2" fill="url(#grad1)"/>  
                    <polygon points="1232.053,1006.044 500,499.999 1304.275,880.951 " id="polygon16" style="opacity:0.2" fill="url(#grad1)"/>  
                    <polygon points="1014.826,1225.902 500,499.999 1125.479,1133.055 " id="polygon18" style="opacity:0.2" fill="url(#grad1)"/>  
                    <polygon points="735.505,1358.206 500,499.999 871.238,1308.803 " id="polygon20" style="opacity:0.2" fill="url(#grad1)"/>  
                    <polygon points="427.778,1386.996 500,499.999 572.223,1386.996 " id="polygon22" style="opacity:0.2" fill="url(#grad1)"/>  
                    <polygon points="128.762,1308.803 500,499.999 264.496,1358.205 " id="polygon24" style="opacity:0.2" fill="url(#grad1)"/>  
                    <polygon points="-125.477,1133.055 500,499.999 -14.826,1225.902 " id="polygon26" style="opacity:0.2" fill="url(#grad1)"/>  
                    <polygon points="-304.274,880.951 500,499.999 -232.052,1006.044 " id="polygon28" style="opacity:0.2" fill="url(#grad1)"/>  
                    <polygon points="-386.064,582.898 500,499.999 -360.981,725.148 " id="polygon30" style="opacity:0.2" fill="url(#grad1)"/>  
                    <polygon points="-360.981,274.847 500,499.999 -386.063,417.098 " id="polygon32" style="opacity:0.2" fill="url(#grad1)"/>  
                    <polygon points="-232.051,-6.049 500,499.999 -304.273,119.045 " id="polygon34" style="opacity:0.2" fill="url(#grad1)"/>  
                    <polygon points="-14.825,-225.907 500,499.999 -125.476,-133.059 " id="polygon36" style="opacity:0.2" fill="url(#grad1)"/>  
                    <polygon points="264.498,-358.211 500,499.999 128.763,-308.807 " id="polygon38" style="opacity:0.2" fill="url(#grad1)"/>  
                  </g>  
                </svg>
                
                1. Hi!

                  Wäre ja auch gegangen

                  Wobei mir dabei auch aufgefallen ist, daß man das ja auch so hätte lösen können

                  Ich sehe und staune! ;-)

                  Das ist einerseits immer ganz praktisch, wenn es tausend verschiedene Möglichkeiten gibt, andererseits erschwert es Anfängern aber wiederum zu entscheiden, welches denn jeweils die "geeignetste" Methode ist.

                  Mal ganz davon abgesehen, dass ich weder die eine, noch die andere bisher vollständig durchblickt habe. ;-)

                  Ich sehe schon, das ist auch wieder so ein Kapitel, mit dem man sich länger und intensiver beschäftigen muss.

                  Aber vorerst bin ich dir wirklich sehr dankbar für deine tolle Hilfe, da es momentan die einzige Grafik ist, die ich in der Form benötige. Und da ist es schon sehr schön, wenn man hier (ausnahmsweise) mal die fertige Lösung für sein Problem serviert bekommt, und nicht erst ein Studium in SVG absolvieren muss ...! :-)

                  Also nochmals meinen besten Dank!

                  Gruß Gunther

                  1. Hallo Gunther,

                    Und da ist es schon sehr schön, wenn man hier (ausnahmsweise) mal die fertige Lösung für sein Problem serviert bekommt, und nicht erst ein Studium in SVG absolvieren muss ...! :-)

                    Nur als Anmerkung, falls sich jemand SVG-Grundlagen aneignen möchte. Habe kürzlich einen mittlerweile acht Jahre alten Vortrag auf Speaker Deck geladen, der auch weiterhin brauchbar sein sollte.

                    Für die tiefere Beschäftigung bieten sich SelfSVG und natürlich die Specs an.

                    Grüße,
                    Thomas

                    1. Hallo Thomas,

                      Nur als Anmerkung, falls sich jemand SVG-Grundlagen aneignen möchte. Habe kürzlich einen mittlerweile acht Jahre alten Vortrag auf Speaker Deck geladen, der auch weiterhin brauchbar sein sollte.

                      Für die tiefere Beschäftigung bieten sich SelfSVG und natürlich die Specs an.

                      besten Dank für den Hinweis - schon gebookmarked ;-)

                      Ich denke, dass SVG Grafiken, insbesondere für "RWD", von großem Interesse/ Wert/ Vorteil sind.
                      Insofern kann zumindest ein grundlegendes Verständnis nicht schaden ...! ;-)

                      Gruß Gunther