User:Lilyuserin/SVG/leer

<?xml version="1.0" encoding="UTF-8"?>
<svg width="500" height="500" version="1.1"
 viewBox="-250 -250 500 500"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <g id="d">
   <circle r="780"/>
  </g>
  <path id="outline"
   d="M-2026,-390
      a780 780 0,0,0 0,780 780 780 0,0,0 675.5,1170
      780,780 0,0,0 675.5,390 780,780 0,0,0 1351,0
      780,780 0,0,0 675.5,-390 780 780 0,0,0 675.5,-1170
      780 780 0,0,0 0,-780 780 780 0,0,0 -675.5,-1170
      780,780 0,0,0 -675.5,-390 780,780 0,0,0 -1351,0
      780,780 0,0,0 -675.5,390 780 780 0,0,0 -675.5,1170
     " />
   <clipPath id="outl">
    <use xlink:href="#outline" />
   </clipPath>
  <filter id="f1" filterUnits="objectBoundingBox"
          x="-0.25" y="-0.25" width="1.5" height="1.5">
    <feGaussianBlur in="SourceGraphic"
       stdDeviation="2"/>
  </filter>
  <filter id="f2" filterUnits="objectBoundingBox"  >
    <feGaussianBlur in="SourceAlpha"
       stdDeviation="5"/>
  </filter>
  <filter id="f1" filterUnits="objectBoundingBox"
          x="-0.25" y="-0.25" width="1.5" height="1.5">
   <feColorMatrix type="hueRotate" values="135" in="SourceGraphic"/>
   <feOffset dy="50" dx="50" />
  </filter>


  <linearGradient id="lgr" gradientTransform="rotate(135)"
   gradientUnits="objectBoundingBox">
   <stop stop-color="rgb(59,156,11)" offset="0"/>
   <stop stop-color="rgb(59,156,11)" stop-opacity="0" offset="1"/>
  </linearGradient>
  <radialGradient id="rb" cx="0.25" cy="0.25" r="1"
  gradientUnits="objectBoundingBox" >
   <stop stop-color="#f00" offset="0" />
   <stop stop-color="#40f" offset="1" />
  </radialGradient>
  <mask id="maske">
   <rect x="-1350" y="-1500" width="1900" height="2700" fill="#fff" />
   <use xlink:href="#triangle"  fill="#000" />
   <use xlink:href="#triangle"  fill="#000"  transform="rotate(51)"/>
  </mask>
  <g clip-path="url(#outl)" id="id1">
   <use xlink:href="#d" filter="url(#f1)" fill="url(#lgr)"/>
  </g>

  <g mask="url(#maske)" id="id2">
   <use xlink:href="#outline" fill="#80f" transform="rotate(257.5)"/>
   <use xlink:href="#outline" fill="#f0f" transform="rotate(309)"/>
  </g>

 </defs>

</svg>

^{CSS in SVG einbinden}

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" viewBox="-150 -150 300 300"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  <style type="text/css">
    .nr1 {stroke: black;
                stroke-width: 5px;
                stroke-opacity: 0.5}
    .nr2 {stroke: white;
                stroke-width: 5px;
                stroke-opacity: 0.5}
  </style>
</defs>

<circle r="1000" fill="yellow" />
<circle class="nr1" r="120" fill="red" />
<circle class="nr2" r="110" fill="blue" />
<circle class="nr1" r="80" fill="red" />
<circle class="nr2" r="70" fill="blue" />
<circle class="nr1" r="40" fill="red" />
<circle class="nr2" r="30" fill="blue" />

</svg>