Forum CMS Made Simple Francophone

Aide francophone sur CMS Made Simple

Vous n'êtes pas identifié(e).

Annonce

ATTENTION

  • Prenez le temps de rechercher si quelqu'un n'a pas déjà proposé une solution à votre problème. Sur le forum français et sur le wiki
  • Pensez à mettre à jour votre version de CMS Made Simple. Nous ne faisons de support que sur LA dernière version de CMS Made Simple.
  • Renseignez impérativement le formulaire de nouveau message de manière la plus complète que possible. Dans votre CMS utiliser le menu Administration du site/Informations du système en haut Vue au format texte. Ces informations demandées nous permettent de mieux vous aider
  • Ajoutez [Résolu] au début du titre de votre 1er message lorsqu'une solution a été trouvée.

#1 19/06/2018 10:54:58

archeo
Membre
Lieu : Lorient
Inscription : 26/10/2012
Messages : 373
Site Web

Les fichiers image au format SVG

Bonjour,

Le format Flash étant à terme condamné semble-t-il, j'ai commencé à m'intéresser aux images au format SVG.

Je n'en suis pas à faire des animations mais j'ai tenté de manière plus prosaïque d'inclure des liens dans un SVG.
Je crée mes fichiers SVG soit avec Openoffice soit avec Affinity designer.
Dans OpenOffice on peut donner un nom à un groupe ou à un objet en faisant un clique droit dessus > nom...
On exporte ensuite en SVG puis on ouvre le fichier dans notepad++. Il suffit de rechercher le nom (ici bivalves) du groupe que l'on a nommé dans openoffice pour le retrouver dans le fichier svg

[== XML ==]
<g id="DrawingGroup_29_bivalves">
    <g>
     <path fill="rgb(0,102,255)" stroke="none" d="M 15978,20564 L 15308,20564 15313,19119 15735,19119 15735,18703 15842,18703 15842,18223 15735,18223 15735,17696 15573,17696 15573,15289 15285,15289 15285,10763 16700,10763 16700,15289 16412,15289 16412,17696 16252,17696 16252,18223 16140,18223 16136,18703 16252,18703 16252,19119 16670,19119 16665,20564 15978,20564 Z"/>
     <path fill="none" stroke="rgb(0,102,255)" id="Drawing_136_0" stroke-linejoin="round" d="M 15978,20564 L 15308,20564 15313,19119 15735,19119 15735,18703 15842,18703 15842,18223 15735,18223 15735,17696 15573,17696 15573,15289 15285,15289 15285,10763 16700,10763 16700,15289 16412,15289 16412,17696 16252,17696 16252,18223 16140,18223 16136,18703 16252,18703 16252,19119 16670,19119 16665,20564 15978,20564 Z"/>
    </g>
    <g id="Drawing_137">
     <rect fill="none" stroke="none" x="15671" y="11072" width="642" height="2049"/>
     <g fill="rgb(255,255,255)" stroke="none" font-family="Arial" font-size="353" font-style="normal" font-weight="400">
      <g transform="translate(16110,12870) rotate(-90) translate(-16110,-12870)">
       <text x="16110" y="12870">
        <tspan x="16110 16378 16489 16698 16927 17039 17247 17477">Bivalves</tspan></text>
      </g>
     </g>
    </g>
   </g>

 

Il suffit ensuite d'ajouter la balise
<a xlink:href="https://www.universalis.fr/encyclopedie/bivalves/" xlink:show="new"> avant le bloc <g id="DrawingGroup_29_bivalves">

et </a> après le bloc, d'enregistrer et le tour est joué enfin presque car il faut intégrer l'image dans la page HTML. On peut le faire de 3 façons:

  1. avec la balise <img /> mais les liens ne sont pas actifs

  2. avec la balise <embed src="uploads/images/biodiv/images/crise-permo-trias.svg"
           width="800"
           type="image/svg+xml"
           pluginspage="http://www.adobe.com/svg/viewer/install/" />
    Les liens sont actifs mais figés

  3. en copiant le contenu Xml du fichier SVG dans le code HTML, les liens sont actifs et en plus on peut utiliser des smarties pour faire des liens paramétrables mais si l'image est complexe on alourdit le contenu de la base de donnée.
    J'ai essayé de faire des liens paramétrables avec la méthode 3 mais sans succès.


MS-Dos, Gem, geoworks, Windows 1, 2, 3, 3.1, 95, 98, XP, seven, 8, 10 smile
Mac system 1 à 6
Wampserver 3.0.3,
PhP 7.0.6,
CMS version 2.2.7

Hors ligne

#2 19/06/2018 18:03:30

archeo
Membre
Lieu : Lorient
Inscription : 26/10/2012
Messages : 373
Site Web

Re : Les fichiers image au format SVG

Une solution pour des liens paramétrable

dans la page deux liens et une balise utilisateur pour charger l'image dans la page dont l'extension a été transformée en php

[== Indéfini ==]
{$lien1={cms_selflink href='presumes-coupables' } scope=global} 
{$lien2='uploads/images/biodiv/images/pendant-crise.svg' scope=global}

{image_svg image="uploads/images/biodiv/images/crise-permo-trias2.php"}

La balise utilisateur qui inclut le fichier le XML du fichier image dans la page

// paramètres d'entrée image //
$image=$params['image'];
include $image;

De la sorte je n'encombre pas la base de données mais le SVG est inutilisable hors de la page

Après avoir inclu le fichier XML les smarty ne fonctionnent plus et on ne peut pas utiliser {$lien1}{$lien2} (ce que l'on peut faire si on copie colle le xml du fichier SVG) . On ajoute donc une petite ligne de php dans le fichier SVG pour les remplacer :

[== PHP ==]
<?php $lien = $smarty->get_template_vars('lien1');echo $lien; ?>

ce qui donne dans le SVG

[== XHTML ==]
<a xlink:href =<?php $lien = $smarty->get_template_vars('lien1');echo $lien; ?> xlink:show="new">
    <g id="Drawing_150">
     <rect fill="none" stroke="none" x="21692" y="10270" width="2545" height="888"/>
     <g fill="rgb(0,0,0)" stroke="none" font-family="Arial" font-size="282" font-style="normal" font-weight="400">
      <text x="21942" y="10649">
       <tspan x="21942 22168 22266 22458 22649 22748 22922 23114 23242 23421 23520 23635">Biodiversité</tspan></text>
     </g>
    </g>
</a>
<a xlink:href =<?php $lien = $smarty->get_template_vars('lien2');echo $lien; ?> xlink:show="new">
    <g id="Drawing_151">
     <rect fill="none" stroke="none" x="20853" y="9890" width="4449" height="391"/>
     <g fill="rgb(0,0,0)" stroke="none" font-family="Arial" font-size="353" font-style="normal" font-weight="400">
      <text x="20870" y="10204">
       <tspan x="20870 21138 21351 21580 21793 21993 22206 22338 22568 22904 23133 23346 23479 23611 23841 23994 24148 24378 24590 24723 24876 25106">Écosystèmes terrestres</tspan></text>
     </g>
    </g>
</a>

MS-Dos, Gem, geoworks, Windows 1, 2, 3, 3.1, 95, 98, XP, seven, 8, 10 smile
Mac system 1 à 6
Wampserver 3.0.3,
PhP 7.0.6,
CMS version 2.2.7

Hors ligne

Pied de page des forums