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

[Yves Combe]

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}

[Olivier]

Up

0

Down

::

Yves Combe wrote:

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

[Olivier]

Up

0

Down

::

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

Yves Combe wrote:

<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

[Yves Combe]

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)

[jm.evers]

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

[Yves Combe]

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.

[jm.evers]

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 8 années et 12 mois par jm.evers. Raison: typo
• Cette réponse a été modifiée le il y a 8 années et 12 mois par jm.evers.

[bernadette]

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

[Auteur]

Messages