Vereinfachte Konfiguration für SVG

Um die Vorschau in weniger komplexen Situationen für euch einfacher zu machen, stellen wir eine Möglichkeit zum Bearbeiten einer SVG-Grafik bereit, die keine tiefergehenden Programmierkenntnisse erfordert, sondern mit Grundkenntnissen in HTML/CSS/JS zu benutzen ist.

Tutorial Video

Beispiel-Code

https://configurator.onco-plugins.de/Wohnzimmer/SW10017

window.gaiaSvg = {
    containerSelector: '.product-detail-media',
    svgUrl: 'https://gaia.onco-plugins.de/downloads/living-room.svg',
    colors:[
        {
            selector: '#chair path', // CSS-Selektor des SVG-Elements
            color: 'chair-color' // Farb-Identifikator aus dem Konfigurator
        }
    ],
    strokes:[
        {
            selector: '#chair path', // CSS-Selektor des SVG-Elements
            color: 'chair-color' // Farb-Identifikator aus dem Konfigurator
        }
    ],
    texts:[
        {
            selector: '#my-text', // CSS-Selektor des SVG-Text-Elements
            variable: 'textinput' // Variablenname aus dem Konfigurator
        }
    ],
    fonts:[
        {
            selector: '#my-text', // CSS-Selektor des SVG-Text-Elements
            variable: 'fontselection' // Schriftart-Identifikator aus dem Konfigurator
        }
    ],
    visibility:[
        {
            selector:'#plant',
            itemId:28938,
            inverse:true
        },
        {
            selector:'#lamp',
            tag:'withLamp'
        }
    ]
};

Die einzelnen Elemente

Allgemein

containerSelector gibt den Selektor des HTML-Elements an, in das die Vorschau eingefügt werden soll. Du kannst den Selektor so schreiben, wie du es auch für CSS tun würdest. '.product-detail-media' Bezeichnet die Fläche, in der in einem Standard-Theme die Artikelbilder zu sehen sind.

svgUrl ist die URL der SVG-Grafik, die bearbeitet werden soll.

Farbe

In dem Feld colors können beliebig viele Zuordnungen von Farbauswahl und Elementen der SVG Grafik hinterlegt werden. Eine Zuordnung besteht dabei immer aus einem selector, der das Element innerhalb der SVG-Grafik beschreibt (auch hier wieder im CSS-Stil, z. B. mittels Klassen oder IDs) und einer Farbe color, bei der der Farb-Identifikator zu hinterlegen ist.

Analog funktioniert das Feld strokes für die Farbe von Konturen.

Text

In dem Feld texts können beliebig viele Zuordnungen von Texteingabe und Text-Elementen der SVG Grafik hinterlegt werden. Eine Zuordnung besteht dabei immer aus einem selector, der das Element innerhalb der SVG-Grafik beschreibt (auch hier wieder im CSS-Stil, z. B. mittels Klassen oder IDs) und einer variable, bei der der Variablenname des Eingabefelds zu hinterlegen ist.

Schriftart

In dem Feld fonts können beliebig viele Zuordnungen von Schriftarten und Text-Elementen der SVG Grafik hinterlegt werden. Eine Zuordnung besteht dabei immer aus einem selector, der das Element innerhalb der SVG-Grafik beschreibt (auch hier wieder im CSS-Stil, z. B. mittels Klassen oder IDs) und einer variable, bei der der Schriftart-Identifikator zu hinterlegen ist.

Sichtbarkeit

In dem Feld visibility können beliebig viele Zuordnungen von aktiven Tags bzw. Konfigurator-Elementen und Elementen der SVG Grafik hinterlegt werden. Eine Zuordnung besteht dabei immer aus einem selector, der das Element innerhalb der SVG-Grafik beschreibt (auch hier wieder im CSS-Stil, z. B. mittels Klassen oder IDs) und entweder einer itemId oder einem tag. Zusätzlich könnt ihr mit inverse: true das Verhalten umkehren. Dann wird das Grafik-Element nicht angezeigt, wenn die Bedingung zutrifft, sondern ausgeblendet.