SVG – Learning by Coding

[ video.svg --> Grafik anzeigen ]

 1: 
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
 2: 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

 3: 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [

 4: 
  <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">

 5: 
  <!-- experimentelle DTD-Erweiterung by TM 2004 -->

 6: 
  <!ATTLIST svg xmlns:a CDATA #FIXED "http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/">

 7: 
  <!ENTITY svgExt "|a:video">

 8: 
  <!ELEMENT a:video EMPTY>

 9: 
  <!ATTLIST a:video

10: 
   x CDATA #IMPLIED y CDATA #IMPLIED width CDATA #REQUIRED height CDATA #REQUIRED

11: 
   volume CDATA #IMPLIED pan CDATA #IMPLIED begin CDATA #IMPLIED end CDATA #IMPLIED

12: 
   fill CDATA #IMPLIED xlink:href CDATA #REQUIRED>

13: 
]>

​14: 15: 
<!-- SVG Learning by Coding http://www.datenverdrahten.de/svglbc/ -->

16: 
<!--    AuthorDrThomas Meinike 05/04 thomas@handmadecode.de     -->

​17: 18: 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

19: 
     xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" zoomAndPan="disable">

​20: 21: 
  <title>SVG Learning by Coding</title>

22: 
  <desc>SVG-Spezifikation in Beispielen</desc>

23: 
  <text x="20" y="30" style="fill: #000; font-size: 24px">

24: 
    Element a:video (ASV 6 DirectX 8+)</text>

25: 
  <text x="20" y="50">[sonst erscheint keine Ausgabe]</text>

26: 
  <a xlink:href="bilder/video.gif" target="svgbox">

27: 
    <text x="270" y="50" style="fill: #F00">Ergebnis als Rastergrafik ...

28: 
      <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseover"/>

29: 
      <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseout"/>

30: 
    </text>

31: 
  </a>

​32: 33: 
  <!-- Abspielflaeche mit Text -->

34: 
  <rect x="139" y="79" width="162" height="122" rx="5" style="stroke: #000; fill: #EEE"/>

35: 
  <text x="170" y="150" style="fill: #00C; font-size: 28px; font-weight: bold;

36: 
    pointer-eventsnone">SVG.TV</text>

​37: 38: 
  <!-- Video-Einbindung -->

39: 
  <a:video x="140" y="80" width="160" height="120" xlink:href="audvid/svgtv.avi"

40: 
    begin="start.click" end="stopp.click" fill="freeze"/>

​41: 42: 
  <!-- Start-Button -->

43: 
  <polygon id="start" points="190,230 190,210 210,220" style="fill: #0C0">

44: 
    <set attributeName="opacity" attributeType="CSS" to="0.5" begin="mouseover"/>

45: 
    <set attributeName="stroke" attributeType="CSS" to="#000" begin="mouseover"/>

46: 
    <set attributeName="opacity" attributeType="CSS" to="1.0" begin="mouseout"/>

47: 
    <set attributeName="stroke" attributeType="CSS" to="none" begin="mouseout"/>

48: 
  </polygon>

​49: 50: 
  <!-- Stopp-Button -->

51: 
  <rect id="stopp" x="235" y="211" width="18" height="18" style="fill: #E00">

52: 
    <set attributeName="opacity" attributeType="CSS" to="0.5" begin="mouseover"/>

53: 
    <set attributeName="stroke" attributeType="CSS" to="#000" begin="mouseover"/>

54: 
    <set attributeName="opacity" attributeType="CSS" to="1.0" begin="mouseout"/>

55: 
    <set attributeName="stroke" attributeType="CSS" to="none" begin="mouseout"/>

56: 
  </rect>

​57: 58: 
</svg>

[zum Anfang]