Ajouter une image SVG avancée

Ajoutez une image SVG avancée à la zone de dessin pour modifier les propriétés de parties spécifiques de l’image lors de la conception ou de l’exécution. Par exemple, vous pouvez signaler un dysfonctionnement d’une partie matérielle en mettant en surbrillance une représentation d’un composant matériel.
Conditions préalables
Pour contrôler les propriétés de l’image, obtenez un fichier SVG conforme aux exigences suivantes :
  • Le format de fichier est SVG 1.2 Tiny
  • Le fichier contient tous les éléments d’image et les propriétés que vous souhaitez configurer
  • Les propriétés de remplissage et de bordure existent et leurs couleurs sont définies en tant qu’attributs XML ou CSS en ligne
  • Les valeurs de couleur sont hexadécimales
CONSEIL: Si le fichier SVG n’est pas conforme aux exigences, l’image s’affichera comme prévu, mais vous ne pourrez pas modifier ses propriétés.
  1. Pour ajouter une image SVG avancée
  2. Dans
    Vue de projet
    , cliquez avec le bouton droit de la souris sur l’objet ou le dossier qui contiendra l’image, puis sélectionnez
    Nouveau
    Dessins
    Image SVG avancée
    .
  3. Double-cliquez sur l’image vide
    Image placeholder
     qui apparaît sur la zone de dessin.
  4. Dans
    Sélectionner un fichier
    , sélectionnez l’image à afficher, puis choisissez
    Sélectionner
    .
    CONSEIL:
    Pour trouver des éléments, commencez à saisir le nom de l’élément à rechercher dans
    Sélectionner un fichier
    .
    Si le fichier n’apparaît pas dans
    Sélectionner un fichier
    , sélectionnez
    Importer des fichiers
    , puis dans
    Importer des fichiers
    , sélectionnez le fichier à importer et choisissez
    Sélectionner
    .
  5. (Facultatif) Ouvrez le fichier SVG dans un éditeur de texte et vérifiez que l’attribut
    @id
     de l’élément image que vous souhaitez modifier et la propriété que vous souhaitez modifier existent dans le fichier SVG.
    Par exemple, pour pouvoir modifier le style de polygone d’un châssis :
    <g id="
    ConveyorChassis
    ">
    <polygon style="fill:#3C4660;" points="8.532,379.733 503.466,379.733 503.466,277.333 8.532,277.333"/>
</g>
  6. Dans
    Propriétés
    , développez
    Propriétés de l’élément SVG
    , puis dans
    ID
    , sélectionnez l’élément image à modifier.
    CONSEIL: Les options de la liste déroulante pour les éléments du fichier SVG correspondent aux attributs
    @id
     des éléments du fichier SVG. Si les valeurs n’apparaissent pas dans la liste déroulante, il se peut que l’image SVG ne soit pas conforme aux exigences requises pour contrôler les propriétés de l’image.
  7. Dans
    Propriété
    , sélectionnez la propriété à modifier pour l’élément image sélectionné, puis dans
    Valeur
    , sélectionnez
    Ajouter un lien dynamique
     pour créer un lien dynamique complexe ou entrez une valeur pour la propriété indiquée :
    • Couleur
      . Sélectionnez ou entrez la valeur hexadécimale de la couleur ou créez un lien dynamique complexe avec un convertisseur vers des valeurs de couleur hexadécimales. Par exemple :
    • Opacité
      . Entrez une valeur comprise entre 0 et 100 pour rendre l’élément image complètement transparent ou totalement opaque.
    • Largeur du trait
      . Définissez la largeur de la ligne en pixels.
    • Dasharray du tracé
      . Spécifiez le tableau de traits de l’une des manières suivantes :
      • En sélectionnant ou saisissant
        Solid
        . Il s'agit de la valeur par défaut.
      • En saisissant un seul nombre. Le nombre représente à la fois la longueur des traits et la longueur de l’espace qui les sépare. Par exemple, entrez 5 pour que la longueur des traits et la longueur de l’espace qui les sépare soient de 5 pixels.
      • En configurant une série de nombres séparés par des points-virgules au format répétable #;#. Le premier nombre représente la longueur d'un trait et le nombre après chaque point-virgule représente la longueur de l’espace suivant ce trait. Les séries saisies sont répétées. Par exemple, entrez 5;2;10;3 pour que le premier trait mesure cinq pixels et que l’espace qui suit mesure deux pixels, suivi d’un autre trait de dix pixels et d’un espace de trois pixels. La série se répète pour afficher un trait plus court suivi d’un trait plus long sur l’ensemble de la ligne.
    CONSEIL:
    Lorsque vous liez la propriété dasharray à une variable de chaîne ou à une balise dans un automate, si la valeur de chaîne n'est pas valide, la valeur de la propriété dasharray prendra la valeur du fichier SVG lors de l’exécution.
    Par exemple, pour un tableau de tirets défini comme une ligne continue dans le SVG avancé, mais qui s'affiche actuellement sous la forme de tirets, si la valeur de la balise liée dans la propriété dasharray contient une erreur comme 1;5:8 ou change pour une valeur non valide comme abc, la valeur revient à la ligne continue spécifiée dans le fichier SVG.
    CONSEIL: La propriété que vous sélectionnez pour l’élément image doit se trouver dans le fichier image SVG avec l’élément image, faute de quoi vous ne pourrez pas configurer la propriété de l’élément image.
  8. Pour ajouter une propriété supplémentaire au fichier SVG, en regard de
    Propriétés de l’élément SVG
    , sélectionnez
    Add
    , puis répétez les étapes 5 et 6. Par exemple, si vous avez configuré
    Couleur
     pour un élément image SVG, vous pouvez ajouter une propriété
    Opacité
     pour modifier l’opacité de ce même élément image ou d’un élément image différent.
  9. Pour modifier les propriétés par défaut du fichier SVG, dans
    Propriétés
    , développez
    Apparence
     et modifiez les propriétés en créant un lien dynamique complexe ou en saisissant une valeur.
Exemple d’image SVG avancée - Alarme désactivée (châssis de convoyeur gris)
Exemple d’image SVG avancée - Alarme activée (châssis de convoyeur rouge)
Fournir une réponse
Vous avez des questions ou des commentaires sur cette documentation ? Veuillez envoyer vos commentaires ici.
Normal