[SVG] Transparentes SVG-Icon

Um SVG-Icons transparent anzuzeigen, muss der Abschnitt rect angepasst werden. Wenn das rect keine Füllfarbe hat, behandelt der SVG‑Renderer das rect ohne "fill" als schwarz gefüllt, also nicht transparent.

Dadurch verdeckt es den Hintergrund. Durch das explizite Setzen von rect mit einem fill="none" wird das SVG-Icon vollständig transparent, nur der feste Inhalt (Beispiel-Symbol) bleibt sichtbar.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
    <defs>
        <linearGradient id="grad-light" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#38bdf8"/>
            <stop offset="100%" stop-color="#3b82f6"/>
        </linearGradient>
        <linearGradient id="grad-dark" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#7dd3fc"/>
            <stop offset="100%" stop-color="#60a5fa"/>
        </linearGradient>
    </defs>

    <!-- Transparenter Hintergrund durch fill="none" -->
    <rect class="bg" width="64" height="64" rx="9" fill="none"/>
    <text class="text" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="45" font-family="sans-serif" font-weight="700" dy="0.087">&#x1f3a7;</text>
</svg>

[ABAP] SALV IDA: Icons und Buttons einfügen, Klick-Events abfangen

CLASS lcl_event_handler DEFINITION.
  PUBLIC SECTION.
    INTERFACES: if_salv_ida_calc_field_handler.

    METHODS: on_cell_action FOR EVENT cell_action OF if_salv_gui_field_display_opt
      IMPORTING
          ev_field_name
          eo_row_data
          sender.

  PRIVATE SECTION.
    TYPES:
      BEGIN OF ty_calc_field,
        icon   TYPE char4,
        button TYPE lvc_value,
      END OF ty_calc_field.

    TYPES: BEGIN OF ty_line.
            INCLUDE TYPE sflight.
            INCLUDE TYPE ty_calc_field.
    TYPES: END OF ty_line.
ENDCLASS.

CLASS lcl_event_handler IMPLEMENTATION.

  METHOD on_cell_action.
    DATA: lv_row TYPE ty_line.

    eo_row_data->get_row_data( EXPORTING
                                 iv_request_type = if_salv_gui_selection_ida=>cs_request_type-all_fields
                               IMPORTING
                                 es_row = lv_row ).

    cl_salv_ida_show_data_row=>display( iv_text = |Datenfeld: { ev_field_name }|
                                        is_data = lv_row ).
  ENDMETHOD.

  METHOD if_salv_ida_calc_field_handler~get_calc_field_structure.
* Struktur-Deklaration für zus. Felder ICON und BUTTON zurückgeben
    ro_calc_field_structure = CAST cl_abap_structdescr( cl_abap_structdescr=>describe_by_name( 'TY_CALC_FIELD' ) ).
  ENDMETHOD.

  METHOD if_salv_ida_calc_field_handler~get_requested_fields.
  ENDMETHOD.

  METHOD if_salv_ida_calc_field_handler~calculate_line.

* Daten akt. Zeile holen
    DATA(lv_sflight) = CONV sflight( is_data_base_line ).

* Freie Sitze ausrechnen
    DATA(lv_cnt_free_seats) = lv_sflight-seatsmax - lv_sflight-seatsocc.

* Calculated Fields bestimmen
    es_calculated_fields = COND ty_calc_field( WHEN lv_cnt_free_seats = 0  THEN VALUE #( icon = icon_red_light    button = icon_delete )
                                               WHEN lv_cnt_free_seats > 10 THEN VALUE #( icon = icon_green_light  button = icon_okay )
                                                                           ELSE VALUE #( icon = icon_yellow_light button = space )
                                             ).

  ENDMETHOD.

  METHOD if_salv_ida_calc_field_handler~start_page.
  ENDMETHOD.

  METHOD if_salv_ida_calc_field_handler~end_page.
  ENDMETHOD.

ENDCLASS.

START-OF-SELECTION.

  DATA(o_handler) = NEW lcl_event_handler( ).

  DATA(o_alv) = cl_salv_gui_table_ida=>create( iv_table_name         = 'SFLIGHT'
                                               io_calc_field_handler = o_handler ). " Referenz für Fieldhandler

* Single-Selection
  o_alv->selection( )->set_selection_mode( if_salv_gui_selection_ida=>cs_selection_mode-single ).

* Tooltips für Icons
  DATA(it_icon_tooltip) = VALUE if_salv_gui_types_ida=>yts_icon_tooltip( ( icon    = icon_yellow_light
                                                                           tooltip = 'Weniger als 10 Sitze.' )
                                                                         ( icon    = icon_green_light
                                                                           tooltip = 'Ausreichend Sitze.' )
                                                                         ( icon    = icon_red_light
                                                                           tooltip = 'Keine Sitze mehr frei.' ) ).

* Tooltips setzen: Feldname 'ICON' muss identisch mit ty_calc_field-icon sein!
  o_alv->field_catalog( )->display_options( )->set_tooltip_for_icons( iv_field_name = 'ICON'
                                                                      its_tooltips  = it_icon_tooltip ).

* Überschrift für Spalte 'ICON': Feldname 'ICON' muss identisch mit ty_calc_field-icon sein!
  o_alv->field_catalog( )->set_field_header_texts( iv_field_name  = 'ICON'
                                                   iv_header_text = 'Status' ).

* Zellen der Spalte 'ICON' sind klickbar: Feldname 'ICON' muss identisch mit ty_calc_field-icon sein!
  o_alv->field_catalog( )->display_options( )->display_as_link_to_action( iv_field_name = 'ICON' ).


* Tooltips für Buttons: Feldname 'BUTTON' muss identisch mit ty_calc_field-icon sein!
  o_alv->field_catalog( )->display_options( )->set_tooltip_for_icons( iv_field_name           = 'BUTTON'
                                                                      iv_use_standard_tooltip = abap_true ).

* Wenn leere Buttonwerte in der Funktion if_salv_ida_calc_field_handler~calculate_line erzeugt werden (INITIAL),
* dann keine Buttons anzeigen
* Feldname 'BUTTON' muss identisch mit ty_calc_field-button sein!
  o_alv->field_catalog( )->display_options( )->display_as_button( iv_field_name               = 'BUTTON'
                                                                  iv_hide_if_value_is_initial = abap_true ).

* Überschrift für Spalte 'BUTTON': Feldname 'BUTTON' muss identisch mit ty_calc_field-button sein!
  o_alv->field_catalog( )->set_field_header_texts( iv_field_name  = 'BUTTON'
                                                   iv_header_text = 'Aktion' ).

* Click-Handler für Icons und Buttons aktivieren
  SET HANDLER o_handler->on_cell_action FOR o_alv->field_catalog( )->display_options( ).

* Tabelle anzeigen
  o_alv->fullscreen( )->display( ).

[ABAP] Alle im System verfügbaren Icons und Symbole anzeigen

* Tabelle 'ICON'
* Report 'RSTXICON'

* alle Icons: SHOWICON
* alle Symbole: SHOWSYMB

WRITE: / 'Telefon:', sym_phone AS SYMBOL.
WRITE: / 'Alarm:  ', icon_alarm AS ICON.

Häufig verwendete Icons

Gruppe      Funktion        Icon

Allgemein   Ausführen       ICON_EXECUTE_OBJECT
            Drucken         ICON_PRINT
            Einstellungen   ICON_ACTIVITY
            Excel           ICON_XXL
            Grafik          ICON_GRAPHICS
            Lupe            ICON_SELECT_DETAIL
            Mail            ICON_ADDRESS
            Protokoll       ICON_PROTOCOL
            Rechnen         ICON_CALCULATION
            Verarbeiten     ICON_OPERATION

Datei       Datei neu       ICON_CREATE
            Datei öffnen    ICON_OPEN
            Export          ICON_EXPORT
            Import          ICON_IMPORT
            Ordner zu       ICON_CLOSED_FOLDER
            Ordner offen    ICON_OPEN_FOLDER
            Speichern       ICON_SYSTEM_SAVE

Datensatz   Anzeigen        ICON_DISPLAY, ICON_DISPLAY_TEXT
            Auswahl alle    ICON_SELECT_ALL
            Auswahl keins   ICON_DESELECT_ALL
            Auswahl Block   ICON_SELECT_BLOCK
            Ausschneiden    ICON_SYSTEM_CUT
            Einfügen        ICON_SYSTEM_PASTE
            Einfügen Zeile  ICON_INSERT_ROW
            Filter          ICON_FILTER
            Kopieren        ICON_SYSTEM_COPY, ICON_COPY_OBJECT
            Löschen         ICON_DELETE, ICON_ERASE
            Löschen Zeile   ICON_DELETE_ROW
            Refresh         ICON_REFRESH
            Suchen          ICON_SEARCH
            Undo            ICON_SYSTEM_UNDO

Status      Abbruch         ICON_CANCEL
            Ok              ICON_OKAY, ICON_CHECKED
            Fehler          ICON_INCOMPLETE
            Fertig          ICON_COMPLETE
            Exception       ICON_FAILURE
            LED grün        ICON_GREEN_LIGHT
            LED gelb        ICON_YELLOW_LIGHT
            LED rot         ICON_RED_LIGHT

Navigation  Links           ICON_ARROW_LEFT
            Rechts          ICON_ARROW_RIGHT
            Schließen       ICON_CLOSE

[ABAP] Textausgabe

SKIP.                           " fügt Leerzeile + Enter (/) ein
ULINE.                          " fügt Trennlinie ein
NEW-LINE.                       " Zeilenvorschub ohne CR (alle folgenden Ausgaben auf gleicher Zeile)
WRITE /.                        " Zeilenvorschub mit CR (alle folgenden Ausgaben auf nachfolgender Zeile)
WRITE 'Text'.                   " einfache Ausgabe
WRITE / 'Text'.                 " einfache Ausgabe mit Zeilenvorschub
WRITE /10 'Text'.               " einfache Ausgabe mit Zeilenvorschub und 10 Zeichen einrücken
WRITE 1 'TEXT'.                 " Text ab Spalte 1
WRITE 1(2) 'TEXT'.              " Text ab Spalte 1, Länge begrenzen auf 2 Zeichen
WRITE 'Text' COLOR COL_HEADING. " farbige Textausgabe, siehe auch FORMAT [...]
WRITE: /10 'Zahl: ', zahl.      " Text einrücken und zus. Zahl ausgeben
WRITE: / 'Test1',               " verkettete Anweisung
       / 'Test2',
       / 'Test3'.
WRITE num TO formatted_text.    " Zahl num in String formatted_text schreiben

WRITE: / 'Ausgabetext' QUICKINFO 'Spalte'.    " beim Überfahren mit dem Cursor wird ein Hint-Text 'Spalte' angezeigen

WRITE: / 'Hotspot' HOTSPOT ON.                " Text 'Hotspot' ausgeben, beim Überfahren mit der Maus wird eine Maushand angezeigt
WRITE: / icon_annotation AS ICON HOTSPOT ON.  " Icon als Hotspot definieren

DATA: chkbox TYPE c LENGTH 1.                 " Variable definieren
WRITE: / chkbox AS CHECKBOX, 'Auswahl'.       " als Checkbox ausgeben
IF chkbox = 'X'.
  ...
ENDIF.