Aggiunta di un'immagine SVG avanzata

Aggiungere un'immagine SVG avanzata al canvas per modificare le proprietà delle singole parti di immagine in fase di progettazione o al runtime.
SUGGERIMENTO: Per esempio, è possibile segnalare un malfunzionamento della parte hardware evidenziando una rappresentazione del componente hardware.
Prerequisiti
Per controllare le proprietà dell'immagine, ottenere un file SVG conforme a questi requisiti:
  • Il formato del file è SVG 1.2 Tiny
  • Le proprietà di riempimento e tratto esistono e hanno colori definiti come attributi XML o CSS inline
  • I valori di colore sono esadecimali
SUGGERIMENTO: Se il file SVG non è conforme ai requisiti, l'immagine verrà visualizzata come previsto, ma non sarà possibile modificare le proprietà dell'immagine.
  1. Per aggiungere un'immagine SVG avanzata
  2. In
    Vista progetto
    , fare clic con il pulsante destro del mouse sull'oggetto o sulla cartella che conterrà l'immagine, quindi selezionare
    Nuovo
    Disegni
    Immagine SVG avanzata
    .
  3. Fare doppio clic sull'immagine vuota
    Image placeholder
     visualizzata sul canvas.
  4. In
    Seleziona file
    , selezionare l'immagine da visualizzare, quindi scegliere
    Seleziona
    .
    SUGGERIMENTO: Se il file non viene visualizzato in
    Seleziona file
    , selezionare
    Importa file
     e, in
    Importa file
    , selezionare il file da importare, quindi scegliere
    Seleziona
    .
  5. (Opzionale) Aprire il file SVG in un editor di testo e verificare l'attributo
    @id
     dell'elemento immagine che si desidera modificare.
    Ad esempio:
    <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. In
    Proprietà
    , in
    Property
    #
    , dall'
    ID
     selezionare l'elemento immagine da modificare.
    SUGGERIMENTO: Le opzioni a discesa corrispondono agli attributi
    @id
     degli elementi del file SVG. Se i valori non vengono visualizzati nell'elenco a discesa, l'immagine SVG potrebbe non essere conforme ai requisiti necessari per controllare le proprietà dell'immagine.
  7. In
    Valore
    , procedere in uno dei modi seguenti:
    • Immettere un valore di colore esadecimale.
    • Creare un collegamento dinamico avanzato con un convertitore a valori di colore esadecimali.
      Esempio di collegamento dinamico avanzato
  8. (Opzionale) Per modificare una parte diversa dell'immagine, accanto a
    Proprietà elementi SVG
    , selezionare
    Add
     e ripetere da 5 a 6.
Esempio di immagine SVG avanzata - allarme disabilitato (chassis trasportatore grigio)
Esempio di immagine SVG avanzata - allarme abilitato (chassis trasportatore rosso)
Vedere l'esempio completo dell'applicazione: Sviluppo di un'icona che cambia colore.
Fornire un feedback
Hai domande o feedback su questa documentazione? invia il tuo feedback qui.
Normal