MB: Wann externes SVG über CSS stylen?

moin,

ich habe erfahren, dass man SVG's nur über direkte Einbindung im HTML-Code mit CSS stylen kann. Über jeglichen Import gehts nicht 😕, jedenfalls hab ich noch nie was davon gehört.

Aber tauch der Gedanke bei den W3C Entwicklern auf? Und Arbeiten die dran das man extern SVG's stylen kann??? Aufjedenfall interessiert es mich brennent.

lgmb

  1. Tach!

    ich habe erfahren, dass man SVG's nur über direkte Einbindung im HTML-Code mit CSS stylen kann. Über jeglichen Import gehts nicht 😕, jedenfalls hab ich noch nie was davon gehört.

    Mit etwas Hilfe von Javascript kann man erreichen, dass das referenzierte Bild zum eingebundenen wird, was man dann CSSen kann: https://stackoverflow.com/a/43015413/1523086.

    dedlfix.

    1. moin,

      ich habe erfahren, dass man SVG's nur über direkte Einbindung im HTML-Code mit CSS stylen kann. Über jeglichen Import gehts nicht 😕, jedenfalls hab ich noch nie was davon gehört.

      Mit etwas Hilfe von Javascript kann man erreichen, dass das referenzierte Bild zum eingebundenen wird, was man dann CSSen kann: https://stackoverflow.com/a/43015413/1523086.

      jo, das machen so ziehmlich alle Responsive Frameworks die ich kenne mit externer SVG-Einbindung 😕. Sorry, ich muss die Frage präzisieren: Gibt es externe SVG's die in HTML eingebunden und von CSS gesteuert werden ohne Skript unterstützung wie JS?

      lgmb

  2. Hallo MB,

    ich habe erfahren, dass man SVG's nur über direkte Einbindung im HTML-Code mit CSS stylen kann. Über jeglichen Import gehts nicht 😕, jedenfalls hab ich noch nie was davon gehört.

    Aber tauch der Gedanke bei den W3C Entwicklern auf? Und Arbeiten die dran das man extern SVG's stylen kann??? Aufjedenfall interessiert es mich brennent.

    Inhalte von svg-Elementen, die in HTML direkt eingebunden sind, lassen sich auch über externe Stylesheets im head des HTML-Dokuments erreichen.

    Für externe SVG-Dokumente, etwa mittels object eingebunden, kann wie bei XML üblich diese Verarbeitungsanweisung verwendet werden:

    <?xml-stylesheet href="name.css" type="text/css"?>
    
    

    Grüße,
    Thomas

    1. moin,

      Für externe SVG-Dokumente, etwa mittels object eingebunden, kann wie bei XML üblich diese Verarbeitungsanweisung verwendet werden:

      <?xml-stylesheet href="name.css" type="text/css"?>
      
      

      Sehr interessant! Kannst du das Bitte näher ausführen 😀? Ich kann mit deiner Aussage leider nichts anfangen außer, das es mein interesse geweckt hat. Link reicht schon oder Code Beispiel.

      lgmb

      1. @@MB

        Für externe SVG-Dokumente, etwa mittels object eingebunden, kann wie bei XML üblich diese Verarbeitungsanweisung verwendet werden:

        Und ich hab’s mit img versucht …

        Sehr interessant! Kannst du das Bitte näher ausführen 😀? Ich kann mit deiner Aussage leider nichts anfangen außer, das es mein interesse geweckt hat. Link reicht schon oder Code Beispiel.

        A colored circle

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. moin,

          Sehr interessant! Kannst du das Bitte näher ausführen 😀? Ich kann mit deiner Aussage leider nichts anfangen außer, das es mein interesse geweckt hat. Link reicht schon oder Code Beispiel.

          A colored circle

          Danke. Geht in deinem Beispie auch interaktive CSS dynamik ohne skript unterstützung (z.B.: :hover, :focus)? Das is ja meine Ausgangsfrage. Sonst muss ich mir eigens per PHP was zusammen basteln damit die Glyphicons funktionalität auch erhalten bleibt: veränderbare größe und farbe. Frisst ladezeit und ist umschön wenn SVG's kreuz und quer im HTML-quellcode verteilt sind 😕.

          lgmb

          1. @@MB

            Geht in deinem Beispie auch interaktive CSS dynamik ohne skript unterstützung (z.B.: :hover, :focus)?

            Du suchst currentColor? Sweet home 🏠

            S.a. den Abschnitt beginnend mit „Nun wollen wir nicht irgendeine Größe; und auch die Farbe festlegen“ im ersten Teil meines Tutorials.

            Glyphicons

            Du verwendest symbol und use? Siehe ganzen ersten und zweiten Teil.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. moin,

              Besten Dank! Ich muss mich da einlesen.

              lgmb

            2. moin,

              Dank nochmals. Hab ne simple Klasse geschrieben was XML importiert, zusätzlich noch ein String im Attribute-Node einfügt und als XML ausgibt.

              lgmb