Si tu veux changer des données d'une image (même une pas SVG), les filter de SVG sont parfaits. Pour la couleur, utilises feColorMatrix.
Attention: Chrome a l'air de n'en avoir rien à ficher, mais je pense qu'il utilises un préfixe spécifique. A chercher.
Exemple du code pour ECLERD:
Un oeil
![[Image: eye.png]](http://www.eclerd.fr/Deviant/svg-filter/eye.png)
est affiché dans une div. Cette div, via CSS, se voit appliquer la propriété "filter". Cette propriété utilises une URI qui renvoie à un fichier SVG dans lequel les feColorMatrix du filtre sont définies.
Le résultat est un oeil teinté en rouge
![[Image: carte-8-small.png]](http://www.eclerd.fr/Deviant/svg-filter/carte-8-small.png)
Tous les fichiers
Les codes sources:
Pour appliquer dynamiquement un filtre, il faudra donc appliquer JS pour modifier le contenu du filter SVG.
Pour modifier un SVG via javascript, tu peux l'inclure directement dans le code HTML.
Sinon, une alternative consiste effectivement à mettre le code javascript dans le SVG, et à appeler ce SVG avec des paramètres "GET" qui définissent les propriétés à appliquer au SVG (c'est peut-être un peu lourd, mais cela devrait être totalement cross-compatible).
Dernière solution: afficher le SVG dans une balise img masquée ou dans un objet "Image" de javascript, puis l'afficher dans un canvas via putImageData (ressources w3schools ou MDN ou HTML5 canvas). En ce cas, cela revient à pixeliser le SVG (via l'objet Image) puis à charger cette image raster dans un objet ImageData, à modifier les données (les pixels) de cette image, et enfin, à afficher le résultat dans un canvas.
A toi de choisir quelle solution te plait le mieux
Pour ton problème de dimensions, le SVG n'utilise pas CSS pour les balises internes. Si tu veux changer la taille d'un rectangle SVG par exemple, il te faut changer l'attribut "width" et "height". Le CSS, il me semble, se fera toujours écraser par la valeur de ces attributs, donc si tu les as définis "en dur" dans ton SVG, le CSS n'aura aucun effet. Tu peux donc essayer soit de ne pas définir ces attributs en dur dans le SVG et de ne les définir que dans le CSS (auquel cas le javascript peut changer le CSS et non les attributs SVG), soit dire au javascript de changer les attributs du svg et non le css.
Pour la taille du SVG, il te faudra jouer sur "preserveAspectRatio" et sur "viewBox".
De manière générale, même si le W3C a des pages et des pages de documentations, celles-ci sont extrèmement bien fichues et instructives. On saute beaucoup de paragraphes quand on les lis (car certains paragraphes concernent ceux qui implémentent les fonctionnalités dans les navigateurs, mais cela ne concerne pas ceux qui utilisent ces fonctionnalités), donc au final, ces documents du W3C sont assez vite lus et une petite fiche papier à coté peut devenir bien plus précieuse que toutes les ressources du net (qui zappent souvent pas mal d'attributs ou de valeurs données par le W3C et qui pourrait se révéler très utiles). D'autant que si les ressources du web omettent certains attributs, on se retrouve être un des rares sites à les connaitre et à les utiliser, et cela donne un bon moyen pour se démarquer.
@Myrina: Le full SVG+JS est effectivement une solution. Il faudra toutefois prévoir un mécanisme (AJAX?) permettant d'envoyer au serveur le résultat des opérations, pour pouvoir les sauvegarder, et un mécanisme inverse (paramètres HTTP/GET?) pour envoyer au SVG les données qui avaient été sauvegardées. Toutefois, l'idée est excellente puisqu'elle limite les langages à utiliser et permet d'inclure le SVG dans toute page HTML avec n'importe quelle balise. Le JS pourrait alors modifier les propriétés "feColorMatrix" d'une définition de filtre, filtre appliqué à l'élément à modifier. Une fois que l'utilisateur est satisfait, il n'a plus qu'à cliquer sur un bouton "sauver" qui enverra les valeurs des paramètres du SVG vers le serveur, celui-ci les recueille et les sauve. Il devient possible également, avec ce système, d'envoyer les paramètres au SVG (via les paramètres HTTP GET) pour que ce SVG retrouve l'état qu'il avait lors de la sauvegarde. Ce SVG peut alors être affiché dans une balise "img" ou dans un canvas, pour être exportable au format PNG.
Attention: Chrome a l'air de n'en avoir rien à ficher, mais je pense qu'il utilises un préfixe spécifique. A chercher.
Exemple du code pour ECLERD:
Un oeil
est affiché dans une div. Cette div, via CSS, se voit appliquer la propriété "filter". Cette propriété utilises une URI qui renvoie à un fichier SVG dans lequel les feColorMatrix du filtre sont définies.
Le résultat est un oeil teinté en rouge
Tous les fichiers
Les codes sources:
/**
* @file
* CSS pour les vues de la carte de jeu.
* LGPL 2013 MONIER Vincent
*
* @version 1.000.00
* @author Xenos
* @date 19:17 27/04/2013
*/
#map-container .map .map-layer-controls,
#map-container .map .map-layer-add,
#map-container .map .map-layer-remove
{
display: block;
position: absolute;
top: 8px;
height: 32px;
width: 64px;
opacity: 1;
z-index: 11;
}
#map-container .map .map-layer-controls
{
left: 8px;
background: url("icons/eye.png");
background-size: 100% 100%;
}
@repeat with 1,red,green,blue,yellow;
#map-container .map .map-layer-controls[data-map-id="$"],
#map-container .map .map-layer-add[data-map-id="$"],
#map-container .map .map-layer-remove[data-map-id="$"]
{
filter: url("filters.svg#svg-filter-$$");
}
@endrepeat;
#map-container .map .map-layer-controls[data-map-id="2"],
#map-container .map .map-layer-controls[data-map-id="3"]
{
right: 8px;
left: auto;
}
#map-container .map .map-layer-controls[data-map-id="3"],
#map-container .map .map-layer-controls[data-map-id="4"],
#map-container .map .map-layer-add[data-map-id="3"],
#map-container .map .map-layer-add[data-map-id="4"],
#map-container .map .map-layer-remove[data-map-id="3"],
#map-container .map .map-layer-remove[data-map-id="4"]
{
top: auto;
bottom: 8px;
}
#map-container .map .map-layer-add[data-map-id="2"],
#map-container .map .map-layer-add[data-map-id="3"]
{
right: 84px;
left: auto;
}
#map-container .map .map-layer-remove[data-map-id="2"],
#map-container .map .map-layer-remove[data-map-id="3"]
{
right: 160px;
left: auto;
}
<?xml version="1.0" standalone="yes"?>
<!--
Filtres appliquables au jeu ECLERD.
LGPL 2013 MONIER Vincent
-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<filter id="svg-filter-greyScale">
<feColorMatrix type="matrix" values="
0.333 0.333 0.333 0.000 0.000,
0.333 0.333 0.333 0.000 0.000,
0.333 0.333 0.333 0.000 0.000,
0.000 0.000 0.000 1.000 0.000
"/>
</filter>
<filter id="svg-filter-saturate-none">
<feColorMatrix type="saturate" values="0"/>
</filter>
<filter id="svg-filter-saturate-half">
<feColorMatrix type="saturate" values="0.5"/>
</filter>
<filter id="svg-filter-saturate-twice">
<feColorMatrix type="saturate" values="2"/>
</filter>
<filter id="svg-filter-red">
<feColorMatrix type="matrix" values="
1.0 0 0 0 0,
0.1 0 0 0 0,
0.1 0 0 0 0,
0.0 0 0 1 0
"/>
</filter>
<filter id="svg-filter-green">
<feColorMatrix type="matrix" values="
0 0 0 0 0,
0 1 0 0 0,
0 0 0 0 0,
0 0 0 1 0
"/>
</filter>
<filter id="svg-filter-blue">
<feColorMatrix type="matrix" values="
0 0 0 0 0,
0 0 0 0 0,
0 0 1 0 0,
0 0 0 1 0
"/>
</filter>
<filter id="svg-filter-yellow">
<feColorMatrix type="matrix" values="
1 0 0 0 0,
0 1 0 0 0,
0 0 0 0 0,
0 0 0 1 0
"/>
</filter>
</svg>Pour appliquer dynamiquement un filtre, il faudra donc appliquer JS pour modifier le contenu du filter SVG.
Pour modifier un SVG via javascript, tu peux l'inclure directement dans le code HTML.
Sinon, une alternative consiste effectivement à mettre le code javascript dans le SVG, et à appeler ce SVG avec des paramètres "GET" qui définissent les propriétés à appliquer au SVG (c'est peut-être un peu lourd, mais cela devrait être totalement cross-compatible).
Dernière solution: afficher le SVG dans une balise img masquée ou dans un objet "Image" de javascript, puis l'afficher dans un canvas via putImageData (ressources w3schools ou MDN ou HTML5 canvas). En ce cas, cela revient à pixeliser le SVG (via l'objet Image) puis à charger cette image raster dans un objet ImageData, à modifier les données (les pixels) de cette image, et enfin, à afficher le résultat dans un canvas.
A toi de choisir quelle solution te plait le mieux
Pour ton problème de dimensions, le SVG n'utilise pas CSS pour les balises internes. Si tu veux changer la taille d'un rectangle SVG par exemple, il te faut changer l'attribut "width" et "height". Le CSS, il me semble, se fera toujours écraser par la valeur de ces attributs, donc si tu les as définis "en dur" dans ton SVG, le CSS n'aura aucun effet. Tu peux donc essayer soit de ne pas définir ces attributs en dur dans le SVG et de ne les définir que dans le CSS (auquel cas le javascript peut changer le CSS et non les attributs SVG), soit dire au javascript de changer les attributs du svg et non le css.
Pour la taille du SVG, il te faudra jouer sur "preserveAspectRatio" et sur "viewBox".
De manière générale, même si le W3C a des pages et des pages de documentations, celles-ci sont extrèmement bien fichues et instructives. On saute beaucoup de paragraphes quand on les lis (car certains paragraphes concernent ceux qui implémentent les fonctionnalités dans les navigateurs, mais cela ne concerne pas ceux qui utilisent ces fonctionnalités), donc au final, ces documents du W3C sont assez vite lus et une petite fiche papier à coté peut devenir bien plus précieuse que toutes les ressources du net (qui zappent souvent pas mal d'attributs ou de valeurs données par le W3C et qui pourrait se révéler très utiles). D'autant que si les ressources du web omettent certains attributs, on se retrouve être un des rares sites à les connaitre et à les utiliser, et cela donne un bon moyen pour se démarquer.
@Myrina: Le full SVG+JS est effectivement une solution. Il faudra toutefois prévoir un mécanisme (AJAX?) permettant d'envoyer au serveur le résultat des opérations, pour pouvoir les sauvegarder, et un mécanisme inverse (paramètres HTTP/GET?) pour envoyer au SVG les données qui avaient été sauvegardées. Toutefois, l'idée est excellente puisqu'elle limite les langages à utiliser et permet d'inclure le SVG dans toute page HTML avec n'importe quelle balise. Le JS pourrait alors modifier les propriétés "feColorMatrix" d'une définition de filtre, filtre appliqué à l'élément à modifier. Une fois que l'utilisateur est satisfait, il n'a plus qu'à cliquer sur un bouton "sauver" qui enverra les valeurs des paramètres du SVG vers le serveur, celui-ci les recueille et les sauve. Il devient possible également, avec ce système, d'envoyer les paramètres au SVG (via les paramètres HTTP GET) pour que ce SVG retrouve l'état qu'il avait lors de la sauvegarde. Ce SVG peut alors être affiché dans une balise "img" ou dans un canvas, pour être exportable au format PNG.