Y a-t'il un inconvénient à utiliser SVG?

Accueil Forums Programmation WIMS Programmation d’exercices OEF Y a-t'il un inconvénient à utiliser SVG?

Vous lisez 6 fils de discussion
  • Auteur
    Messages
    • #2263
      Yves Combe
      Participant
      Up
      0
      Down
      ::

      Le code d’exercice suivant marche dans firefox. Y a-t’il un problème à utiliser SVG pour les dessins générés?

      \title{ Essai SVG }
      \integer{larg = 30 + randint(0..30)}
      \integer{long = 50 + randint(0..30)}
      \integer{peri = 2*(\long + \larg)}
      \integer{yt1 = .5*\larg + 100}
      \integer{xt2 = .5*\long  + 50}
      \text{unite = cm}
      \statement{ 
      Calculer le périmètre de ce rectangle
      <svg
             width="200"
             height="200"
        <g>
          <rect
             style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
             width="\long"
             height="\larg"
             x="50"
             y="100"
       />
          <text text-anchor="middle"
             x="40"
             y="\yt1"><tspan>\larg \unite</tspan></text>
          <text text-anchor="middle"
             x="\xt2"
             y="90"><tspan>\long \unite</tspan></text>
        </g>
      </svg>
      
      }
      
      \answer{périmètre}{\peri \unite}{type=units}
    • #2264
      Avatar photoOlivier
      Maître des clés
      Up
      0
      Down
      ::

      Le code d’exercice suivant marche dans firefox. Y a-t’il un problème à utiliser SVG pour les dessins générés?

      Bonjour,
      Quand on parle de compatibilité de fonctionalités, il faut parler de navigateurs, mais aussi de version. Ce qui est vrai avec la derniere version de Firefox ne l’est peut-être pas avec la précédente… et c’est pareil pour tous les navigateurs (Chrome, safari, etc…)

      Vous trouverez ici la liste des navigateurs (avec les versions) qui affichent correctement le SVG :
      http://caniuse.com/svg

      Il faut surtout faire attention aux dernières lignes : On peux voir qu’aujourd’hui, tous les navigateurs gèrent le SVG. C’est une bonne chose, et je pense qu’on peux en effet commencer a l’utiliser. Mais on remarque aussi qu’il y a ne serait-ce que 3 versions en arrière, certains navigateurs (comme Internet explorer 8), ne le supportait pas. Cela ne représentera donc pas la majorité des utilisateurs, mais il faut tout de même prendre en compte ce fait (et éventuellement le préciser dans un module d’exercices comprenant des SVG).
      Personnellement, j’utiliserais SVG, mais en collant ce lien pour que les utilisateurs soient prévenus.

      Olivier Bado-Faustin / Université Côte d’Azur

    • #2265
      Avatar photoOlivier
      Maître des clés
      Up
      0
      Down
      ::

      Pour une meilleure lisibilité (afin de ne pas superposer le texte et le rectangle), je changerai simplement cette partie :

      <text text-anchor= »middle »
      x= »40″
      y= »\yt1″><tspan>\larg \unite</tspan></text>

      ainsi :

          <text text-anchor="right"
             x="0"
             y="\yt1"><tspan>\larg \unite</tspan></text>

      Olivier Bado-Faustin / Université Côte d’Azur

      • #2266
        Yves Combe
        Participant
        Up
        0
        Down
        ::

        Oui, bien sûr tu as raison. J’ai juste fait un exemple simple pour montrer ce que j’avais en tête, ce n’était pas finalisé.

        En fait j’avais en tête le dessin des barres comme dans la méthode des barres (Singapore math bar model)

    • #2267
      jm.evers
      Participant
      Up
      0
      Down
      ::

      Hi,
      The latest svn version of wims allows creation of html5 canvas images…as you probably know these images are pixel perfect (just like SVG). On zooming / dragging -for example- a new png image is created by the canvas engine of the browser.
      All modern browsers support canvas.
      The canvasdraw syntax is comparable (but not always compatible) with the wims included flydraw program (used for serverside creation of bitmap images)

      !exec canvasdraw
      size 400,400
      xrange -10,10
      yrange -10,10
      linewidth 2
      rect x0,y0,x1,y1,blue
      fontfamily italic 16px Ariel
      string green,-10,-10,Calculate something
      To see modules making use of canvasdraw (as replacement for java applet), see
      http://wims.math.leidenuniv.nl/canvas

      kind regards,
      joke

    • #2268
      Yves Combe
      Participant
      Up
      0
      Down
      ::

      HTML5 canvas! That’s great.

      I suppose there will be a support for the \embed instruction en canvas? The main problem in svg images as I have tested them is \embed is not possible even inside <text> tag.

    • #2269
      jm.evers
      Participant
      Up
      0
      Down
      ::

      I’m not into OEF…but with canvasdraw you can include as many textareas / inputfields (even in mathml) as you like.
      They will be embedded in the canvas.
      Just use a canvasdraw command like ‘input x,y,size,readonly,value
      to place the inputfield on location (x:y)
      Canvasdraw command ‘inputstyle some_css_string’ may be used to adjust the inputfield looks.
      A javascript function ‘read_canvas()’ will read all inputfields.
      Canvasdraw command ‘replyformat int’ may be use to format the output of ‘read_canvas()’ to suit your ‘answertype’
      etc etc etc

      • Cette réponse a été modifiée le il y a 9 années et 8 mois par jm.evers. Raison: typo
      • Cette réponse a été modifiée le il y a 9 années et 8 mois par jm.evers.
    • #2272
      bernadette
      Maître des clés
      Up
      0
      Down
      ::

      Oui, il y aura bientôt un développement dans oef pour l’insertion des commandes usuelles comme embed dans canvasdraw bientôt; nous attendions que le gros de travail se stabilise pour le faire.
      Bernadette

Vous lisez 6 fils de discussion
  • Vous devez être connecté pour répondre à ce sujet.