1 / 29

Scalable vector graphics SVG

Scalable vector graphics SVG. http://www.yoyodesign.org/doc/w3c/svg1/ (documentation en français – voir menu Aides ). Page SVG. < svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org /1999/xlink“ >

karma
Download Presentation

Scalable vector graphics SVG

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Scalable vector graphics SVG http://www.yoyodesign.org/doc/w3c/svg1/ (documentation en français – voir menu Aides)

  2. Page SVG <svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org /1999/xlink“> <scripttype="text/javascript">        <![CDATA[            function execute (x) {                . . . Javascript            }        ]]></script><circleid="circ"cx="25"cy="75"r="20"fill="red"/></svg> Eléments SVG

  3. Insertion d’un fichier SVGdans un fichier HTML <embedsrc="xxx.svg"name="svg0" type="image/svg+xml" width="200px"height="200px"/>

  4. Composants SVG <lineid="ln"x1="5"y1="5"x2="45"y2="45"stroke="red"/> <circleid="circ"cx="25"cy="75"r="20"fill="red"/> <ellipseid="ell"cx="75"cy="75"rx="20"ry="10"fill="red"/> <pathid="path"d="M105,105 C105,145 145,145 145,105"stroke="red"fill="none"/> <polylineid="pLine"points="105,5 145,45 105,45 145,5"stroke="red"fill="none"/> <polygonid="poly"points="155,5 195,45 155,45 195,5"stroke="red"fill="none"/> <rectid="rect"x="105"y="55"width="40"height="40"fill="red“ stroke-width=“4“/> <rectid="rectr"x="155"y="55"rx="5"ry="5"width="40"height="40"fill="red"/>

  5. Placement du texte <textx="200"y="50"text-anchor="end">Un texte</text> end middle start fill="red"

  6. Formatage du texte <gfont-family="Verdana"font-size="45"id='grp'><textx="200"y="150"fill="blue">            Ce<tspanfont-weight="bold"fill="red">n'est pas</tspan>            une banane.</text></g>

  7. Transformations <lineid="ln1"x1="5"y1="5"x2="45"y2="5"stroke="blue"/> <lineid="ln2"x1="5"y1="5"x2="45"y2="5"stroke="green"transform="rotate(30, 8, 20)"/> <lineid="ln3"x1="5"y1="5"x2="45"y2="5"stroke="red"transform="translate(20, 20) rotate(30, 8, 20)"/> <lineid="ln3"x1="5"y1="5"x2="45"y2="5"stroke="black"transform="rotate(30, 8, 20) translate(20, 20)"/> centre de rotation

  8. Transformation de groupe <gtransform="rotate(45, 8, 50)"><lineid="ln"x1="5"y1="5"x2="45"y2="5"stroke="red"/><lineid="ln"x1="5"y1="15"x2="45"y2="15"stroke="red"/><lineid="ln"x1="5"y1="25"x2="45"y2="25"stroke="red"/></g>

  9. Liste des transformations transform="rotate(30, 80, 100)"transform="translate(100, 110)"transform="scale(2, 3)"transform="skewX(45)"transform="skewY(30)" Les angles sont en degrés

  10. Matrice de translation x' = x + tx y' = y + ty 1 = 1

  11. Matrice d’échelle x' = sx· x y' = sy· y 1 = 1

  12. Matrice de rotation x' = x cos(a) – y cos(a) y' = x sin(a) + y cos(a) 1 = 1

  13. Rotation en 2 dimensions v' a vy vx' vy' a v a vx vx cos a cos a ? vx vx sin a sin a ? 0 cos a -sin a vx sin a cos avy - vy sin a ? - sin a0 vy cos a ? cos avy vx‘ = = * * vy‘ = = *

  14. Matrice d’inclinaison selon xskewX x' = x + y tan(a) y' = y 1 = 1

  15. Matrice d’inclinaison selon y x' = x y' = x tan(a) + y 1 = 1

  16. Matrices de transformation • Ce qui explique pourquoi les transformations sont appliquées en partant de la dernière dans les transformations définies dans les éléments SVG.

  17. Matrices de transformation La dernière ligne est toujours la même. Il suffit donc de connaître 6 composantes de la matrice pour la déterminer. On peut parfois la passer à une fonction sous la forme d’un tableau à une dimension: [a b c d e f] par exemple pour une inclinaison: [1 tan(a) 0 0 1 0]

  18. Exemple de transformation définie par une matrice transform="rotate(30)" correspond à transform=“matrix(0.866, 0.5, -0.5, 0.866, 0, 0)" avec 0.866 = cos(Math.PI/180.0 * 30.0) 0.5 = sin(Math.PI/180.0 * 30.0) (Dans les transformations des éléments, les angles sont en degrés)

  19. Clic sur un élément et affichage des coodonnées <svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><scripttype="text/javascript">        <![CDATA[            function execute (event, n) {alert(event.clientX+" "+ event.clientY+" "+n)            } // lieu du pointage de la souris         ]]></script><circleid="circ"cx="25"cy="75"r="20"fill="red"onclick="execute(evt,5)"/></svg>

  20. Lieu du pointage de la souris <svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"onclick='execute(evt)'><scripttype="text/javascript">        <![CDATA[            function execute (event) {alert(event.clientX+” “+event.clientY)            }         ]]></script><circleid="circ"cx="25"cy="75"r="20"fill="red"/></svg>

  21. Placement d’objets sous la souris <svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"onmousemove="execute(evt,6)"><scripttype="text/javascript">        <![CDATA[            function execute (e, n) {                document.getElementById("circ").setAttribute("cx", e.clientX)                document.getElementById("circ").setAttribute("cy", e.clientY)            } // le cercle suit la souris !        ]]></script><circleid="circ"cx="25"cy="75"r="20"fill="red"/></svg>

  22. Création d’éléments sous la souris <svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"onmousemove="execute(evt)"><scripttype="text/javascript">        <![CDATA[            function execute (e) {                var shape = document.createElementNS(                    "http://www.w3.org/2000/svg", "circle");                shape.setAttribute("cx", e.clientX);                shape.setAttribute("cy", e.clientY);                shape.setAttribute("r", 2);                shape.setAttribute("fill", "green");                document.documentElement.appendChild(shape);            }        ]]></script></svg>

  23. Dessin SVG dans une page HTML <html><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>test</title><scripttype="text/javascript">            function tst() {               execute(100,100) // défini dans le fichier SVG             }</script></head><body><buttononclick='tst()'>Test</button><embedsrc="temp.svg"name="svg0" type="image/svg+xml"width="200px"height="200px"/></body></html>

  24. Communication HTMLSVG Top Page HTML function battre() { . . . } // définition bouger() // appel top.battre() // appel top.bouger = function() { . . . } // définition Graphique SVG

  25. Appels HTML  SVG Page HTML svgDocument.getElementById(‘cercle’).setAttribute(“x”, 12) Zone SVG // dans onload ou autre top.svgDocument = document

  26. Définition de groupes et de chablons <defs>    groupes . . . (dans n'importe quel ordre)    éléments . . .<g id='group1' fill='green' transform='scale(0.5) rotate(30)'>    éléments . . .</g></defs> <use x='240' y='5' xlink:href='#group1' />

  27. Dégradés de couleur <defs><linearGradient id='unGradient' x1=“20%" y1="0%" x2="100%" y2=“50%"><stop offset="20%" stop-color="rgb(255,255,0)" stop-opacity="1"/><stop offset="80%" stop-color="rgb(255,0,0)" stop-opacity="1"/></linearGradient></defs> <ellipse cx="200" cy="90" rx="80" ry="80" style="fill:url(#unGradient)"/>

  28. Dégradé radial <defs><radialGradient id="unGradient" cx="40%" cy="20%" r="30%" fx="40%" fy="20%"><stop offset="20%" stop-color="rgb(255,255,0)" stop-opacity="1"/><stop offset="80%" stop-color="rgb(255,0,0)" stop-opacity="1"/></radialGradient></defs> <ellipse cx="200" cy="90" rx="80" ry="80" style="fill:url(#unGradient)"/>

  29. Textes incurvés <defs><path id="textPath" d="M10 50 C10 0 90 0 90 50"/> </defs> <text fill="red">   <textPath xlink:href="#textPath">Aaaa Bbbb Cbbb</textPath></text>

More Related