unknown: [gelöst] Strahlen nach außen hin transparent werden lassen

Beitrag lesen

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>