SVG - Merker-Seite

Erfahrungsberichte zur Info. Nutzung auf eigene Verantwortung
Direkt zum Seiteninhalt

Hauptmenü:

SVG

EDV > Webseiten
Stefan-Wichmann.de Werbung: Texte des Autoren s.wichmann
Zur nebenstehenden anklickbaren Grafik habe ich unten den Code hinterlegt. Spielt ruhig ein wenig mit den Parametern...
Hier das Codebeispiel:


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:html="http://www.w3.org/1999/xhtml" width="500" height="200">

<style type="text/css">
<![CDATA[
text {font-family:Arial Black,Arial;font-weight:bold;font-stretch:none;fill:Black;font-size:14px}]]>
</style>
<linearGradient id="verlauf_kl" gradientTransform="rotate(90)">


<stop offset="0%" style="stop-color:green;stop-opacity:1"/>
<stop offset="90%" style="stop-color:lightyellow;stop-opacity:1"/>

</linearGradient>


<linearGradient id="verlauf" gradientTransform="rotate(90)">

<stop offset="0%" style="stop-color:lightyellow;stop-opacity:1"/>

<stop offset="90%" style="stop-color:green;stop-opacity:1"/>

</linearGradient>


   <!-- Text kippen -->
   <!-- g transform="skewX(-10)"-->

<a xlink:href="http:\\www.stefan-wichmann.de">

<!-- Text schräg und y verschieben-->
   <!-- innerhalb text-Tag transform="rotate(-30) translate(0,100)" -->

<!-- Textposition und Farbe -->

<text x="-15" y="30" transform="rotate(-25) translate(0,100) "
style="font-family:Arial;font-size:18;
fill:url(#verlauf)



">
<!-- Textpositionen pro Buchstaben -->
<!-- tspan y="0,1,2,3,4,5,6,7,8,9,10,11"
dx="0,1,2,3,4,5,6,7,8,9,10,11,10,9,8,7,6,5,4,3,2,1"
darzustellender Text
</tspan -->


<!-- darzustellender Text -->
Stefan-Wichmann.de


<!-- Farblich einblenden-->
<animateColor  dur="16s" from="lightyellow" to="green" attributeName="fill" />

</text></a>

<defs>
<!-- animateMotion  xlink:href="#kugel" dur="6s" path="M0 130 385 0" rotate="0" /-->
<!-- M0 erste pos -->

<animateMotion  xlink:href="#kugel" dur="6s" path="M-130 30 235 90" rotate="0" />

</defs>

<g transform="translate(25 60)">


<!-- stroke ist Linie -->
<path id="Pfad"  d="M140 100 L600 100" style="stroke:none;stroke-opacity:0.5;fill:none"/>

<!-- rect id="Quadr" x="0" y="0" width="10" height="10" style="fill:red;stroke:black;" / -->

<!-- stroke ist umrahmung -->
<!-- circle id="kugel" cx="10" cy="10" r="3" style="fill:green;stroke:none" -->

<text id="kugel" x="-30"   transform="rotate(-25) translate(0,30) " style="fill:url(#verlauf_kl)
" >Werbung: Texte des Autoren

     <animateColor  dur="16s" from="green" to="lightyellow" attributeName="fill" />
</text>
</g>

<foreignObject>
<html:div>

<html:p>s.wichmann</html:p>
</html:div>

</foreignObject>
</svg>

Zurück zum Seiteninhalt | Zurück zum Hauptmenü