Aggiungere 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 a runtime. 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
  • Il file contiene tutte le proprietà e gli elementi dell'immagine che si desidera configurare
  • 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:
    Per trovare gli elementi, iniziare a digitare il nome dell'elemento da trovare in
    Seleziona file
    .
    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 che nel file SVG siano presenti sia l'attributo
    @id
     dell'elemento immagine che si desidera modificare sia la proprietà che si desidera modificare.
    Ad esempio, per poter modificare lo stile del poligono di uno chassis:
    <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à
     espandere
    Proprietà elementi SVG
    , quindi in
    ID
     selezionare l'elemento immagine da modificare.
    SUGGERIMENTO: Le opzioni a discesa per gli elementi del file SVG 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
    Proprietà
    , selezionare la proprietà da modificare per l'elemento immagine selezionato, quindi in
    Valore
    , selezionare
    Aggiungi collegamento dinamico
     per creare un collegamento dinamico avanzato o immettere un valore per la proprietà indicata:
    • Colore
      . Selezionare o immettere il valore esadecimale per il colore o creare un collegamento dinamico avanzato con un convertitore in valori di colore esadecimali. Ad esempio:
    • Opacità
      . Immettere un valore compreso tra 0 e 100 per rendere l'elemento immagine completamente trasparente o completamente opaco.
    • Larghezza tratto
      . Immettere la larghezza della linea in pixel.
    • Dasharray tratto
      . Specificare l'array di trattini nei seguenti modi:
      • Selezionando o immettendo
        Ininterrotto
        . Questa è l'impostazione predefinita.
      • Immettendo un solo numero. Il numero rappresenta sia la lunghezza del trattino che la lunghezza dello spazio tra i trattini. Ad esempio, immettere 5 in modo che sia la lunghezza del trattino che la lunghezza dello spazio tra i trattini siano di 5 pixel.
      • Configurazione di una serie di numeri separati da punto e virgola nel formato ripetibile #;#. Il primo numero rappresenta la lunghezza del trattino e il numero dopo ciascun punto e virgola rappresenta la lunghezza dello spazio tra i trattini. La serie inserita viene ripetuta. Ad esempio, immettere 5;2;10;3 per fare in modo che il primo trattino sia di cinque pixel e lo spazio successivo di due pixel, seguito da un altro trattino di 10 pixel e da uno spazio di 3 pixel. La serie si ripete per visualizzare il trattino più corto seguito da un trattino più lungo per l'intera linea.
    SUGGERIMENTO:
    Quando si associa la proprietà dasharray a una variabile stringa o un tag in un controller, un valore stringa non valido determina il valore della proprietà dasharray quando tale valore cambia nel valore nel file SVG a runtime.
    Ad esempio, se l'array di trattini è definito come una linea continua nell'SVG avanzato ma è attualmente visualizzato come motivo di trattino, se il valore del tag associato nella proprietà dasharray cambia in un valore non valido come abc o contiene un errore di battitura in formato stringa come 1;5:8, il valore ritorna alla linea continua specificata nel file SVG.
    SUGGERIMENTO: La proprietà selezionata per l'elemento immagine deve essere presente nel file immagine SVG insieme all'elemento immagine, altrimenti non sarà possibile configurare la proprietà per l'elemento immagine.
  8. Per aggiungere un'ulteriore proprietà per SVG, accanto a
    Proprietà elementi SVG
    , selezionare
    Add
     e ripetere i passaggi 5 e 6. Ad esempio, se è stato configurato
    Colore
     per un elemento immagine SVG, è possibile aggiungere una proprietà
    Opacità
     per modificare l'opacità dello stesso elemento immagine o di un elemento immagine diverso.
  9. Per modificare le proprietà predefinite per SVG, in
    Proprietà
     espandere
    Aspetto
     e modificare le proprietà creando un collegamento dinamico avanzato o immettendo un valore.
Esempio di immagine SVG avanzata - allarme disabilitato (chassis trasportatore grigio)
Esempio di immagine SVG avanzata - allarme abilitato (chassis trasportatore rosso)
Fornire un feedback
Hai domande o feedback su questa documentazione? invia il tuo feedback qui.
Normal