Dynamiske SVG

Her ser du hvordan du bruker Dynamisk SVG for å endre farger eller andre attributter i en SVG basert på verdier fra datapunkter. Dette brukes for å lage mer informative og visuelle visninger

Skrevet av Evolo Support

Sist oppdatert Omtrent 2 timer siden

Hva du kan bruke det til

Du kan bruke Dynamisk SVG til å:

  • vise driftstilstand, for eksempel grønn farge når en vifte går

  • vise feil, for eksempel rød farge ved alarm eller feilstatus

  • endre synlighet, farge eller andre attributter i en egendefinert SVG

  • lage mer dynamiske prosessbilder og statusvisninger.

Før du starter

Sørg for at SVG-en du bruker har tydelige og unike ID-er på elementene du vil styre. Du trenger disse ID-ene når du setter opp regelen i Dynamisk SVG.

Slik gjør du det

  1. Åpne visningsbyggeren.

  2. Legg til en Dynamisk SVG-kontainer i visningen.

  3. Last opp SVG-filen du vil bruke.

  4. Legg til en regel for elementet du vil styre.

  5. Velg datapunktet som skal styre endringen.

  6. Skriv inn ID-en til SVG-elementet du vil endre.

  7. Velg hvilket attributt som skal endres.

  8. Angi hvilken verdi som skal utløse endringen.

  9. Velg hvilken farge eller streng som skal brukes.

  10. Lagre og test visningen.

Feltene du må fylle inn

Datapunkt

Velg datapunktet som skal styre endringen i SVG-en.

SVG element ID

Skriv inn ID-en til elementet i SVG-en som skal endres. Dette må være samme ID som i SVG-koden.

SVG attribute ID

Velg hvilket attributt som skal endres. Vanlige eksempler er:

  • fill

  • stroke

  • opacity

Verdi

Angi hvilken datapunktverdi som skal utløse endringen.

Farge / streng

Velg hvilken verdi som skal settes når datapunktet matcher. Dette kan være en fargekode eller en tekststreng. Du kan for eksempel bruke:

  • #00FF00

  • hidden

  • visible

Eksempel: endre farge på strek

Eksempel på SVG-kode:

<g id="active" stroke="#ADADAD">
 <circle id="circle" stroke-linejoin="round" />
 <path stroke-linejoin="round" />
</g>

Eksempel på oppsett:

  • Datapunkt: FanStatus

  • SVG element ID: active

  • SVG attribute ID: stroke

  • Verdi: 1

  • Farge / streng: #00FF00

Resultat: Når FanStatus = 1, blir streken grønn.

Tips

Bruk korte og tydelige ID-er i SVG-en.
Test gjerne SVG-en med ett element først før du bygger større logikk.
Bruk heksadesimale farger når du vil ha presis kontroll på fargevalg.

Feilsøking

Ingenting skjer i visningen

Sannsynlig årsak:
ID-en på elementet i SVG-en stemmer ikke med det du har lagt inn.

Løsning:
Kontroller at SVG element ID er helt lik ID-en i SVG-koden.

Elementet får ikke riktig verdi

Sannsynlig årsak:
Datapunktverdien matcher ikke verdien du har satt i regelen.

Løsning:
Test datapunktet og kontroller at verdien faktisk blir lik eller større enn terskelen du har valgt