Comment transformer des données XML en SVG pour la visualisation de la mise en page d'un document ?

Question

Dans mon fichier XML, j'ai une annotation qui représente la mise en page physique d'un document imprimé, que je voudrais visualiser à l'aide d'une simple grille dessinée au format SVG.

Le document en question est décrit à l'aide d'un ensemble d'éléments, qui sont illustrés ci-dessous. Pour commencer, l'élément zone-modèle définit la largeur et la hauteur du document, ainsi que la manière dont le document est divisé verticalement (1 ligne) et horizontalement (3 colonnes).

Les colonnes et les lignes sont définies à l'aide des attributs hspacing et vspacing, dont les valeurs sont des pourcentages des attributs width et height.

La disposition initiale définie dans le zone-modèle est ensuite élaboré à l'aide d'éléments imbriqués sous-zone qui ont des attributs similaires liés aux caractéristiques physiques de la mise en page. Dans ce cas, la première colonne comporte un total de neuf lignes. L'attribut location décrit l'emplacement de la sous-zone dans l'élément parent. Dans l'exemple, la sous-zone est située dans la première colonne.

<area-model>
  <area-root id="layout" cols="3" rows="1" hspacing="25 25 50" vspacing="100" width="404mm" height="210mm" />
    <sub-area id="column-1" location="col-1" cols="1" rows="9" hspacing="100" vspacing="2 8 9 3 3 10 22 39 4" width="101mm" height="210mm">
    </sub-area>
  </area-root>
</area-model>

Le résultat attendu serait quelque chose du genre de ces lignes à partir d'un SVG que j'ai créé à l'aide d'Inkscape :

<svg>
 <g id="layout">
   <rect y="842" x="0" height="210" width="404" id="area-root" style="fill:none;stroke:#000000;stroke-width:1"/>
   <rect y="842" x="0" height="210" width="101" id="area-root-col-1" style="fill:none;stroke:#000000;stroke-width:1"/>
   <rect y="842" x="101" height="210" width="101" id="area-root-col-2" style="fill:none;stroke:#000000;stroke-width:1"/>
   <path id="column-1-row-1" d="m 0.50493076,847.86029 99.99013924,0" style="fill:none;stroke:#000000;stroke-width:1"/>
   <path id="column-1-row-2" d="m 0.50243229,869.8569 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/>
   <path id="column-1-row-3" d="m 0.50243229,888.85128 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/>
   <path id="column-1-row-4" d="m 0.50243229,894.8495 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/>
   <path id="column-1-row-5" d="m 0.50243229,900.84772 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/>
   <path id="column-1-row-6" d="m 0.50243229,921.8415 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/>
   <path id="column-1-row-7" d="m 0.50243229,963.82907 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/>
   <path id="column-1-row-8" d="m 0.50243229,1045.8048 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/>
</g>
</svg>

Ma question est la suivante : comment utiliseriez-vous XSLT pour transformer le XML en SVG ?

Dans mon cas, le plus grand défi consiste à trouver le moyen de calculer les mesures requises (emplacement, largeur et hauteur) pour le projet de l sous-zone afin de les placer correctement dans les colonnes ou les rangées définies dans le fichier zone-Root élément.

D'autre part, le chemin dans le SVG ci-dessus pourraient être remplacés par des éléments de type rect dans le SVG, pour autant qu'il reflète les informations stockées dans le XML. En fait, tout ce dont j'ai besoin, c'est d'une représentation visuelle du fichier XML.

Merci d'avance ! N'hésitez pas à me faire savoir si d'autres éclaircissements sont nécessaires.

Answer 1

Ma question est la suivante : comment utiliseriez-vous XSLT pour transformer le XML en SVG ?

Utilisez un mappage de chaque attribut d'élément vers le SVG correspondant, comme dans cet exemple :

XML

<?xml version="1.0"?>
<dataSet>
  <bar fill="rgb(255,100,75)">
    <value>71</value>
    <desc>01</desc>
  </bar>
  <bar fill="rgb(0,225,0)">
    <value>89</value>
    <desc>02</desc>
  </bar>
  <bar fill="rgb(75,100,245)">
    <value>23</value>
    <desc>03</desc>
  </bar>
  <bar fill="rgb(200,200,200)">
    <value>108</value>
    <desc>04</desc>
  </bar>
  <bar fill="rgb(245,245,25)">
    <value>93</value>
    <desc>05</desc>
  </bar>
</dataSet>

XSLT

<?xml version="1.0" encoding="utf-8"?>
<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" >
  <xsl:template match="dataSet">
    <svg width="200px" height="250px" xmlns="http://www.w3.org/2000/svg">
      <g id="bar" transform="translate(0,200)">
        <xsl:for-each select="bar">
          <xsl:variable name="val" select="value"/>
          <rect x="{position()*25}" y="-{$val*1.5}" height="{$val*1.5}" width="15" style="fill:{@fill};"/>
          <text x="{position()*25 + 7.5}" y="0" style="font-family:arial;text-anchor:middle;baseline-shift:-15;">
            <xsl:value-of select="desc"/>
          </text>
        </xsl:for-each>
      </g>
    </svg>
  </xsl:template>
</xsl:transform>

Dans mon cas, le plus grand défi consiste à trouver le moyen de calculer les mesures requises (placement, largeur et hauteur) pour les éléments de sous-zones, afin de les placer correctement dans les colonnes ou les lignes définies dans l'élément area-Root.

Utilisez le CSS pour cela, comme dans ces questions sans rapport :

• Affichage d'un lien dans une zone hyperliée
• CSS : display:inline-block et positioning:absolute

Références

• Dessin automatisé d'arbres : XSLT et SVG
• Galerie Rotary CSSPlay
• Créer des diagrammes à barres SVG à partir de XML avec XSLT