tag:forum.selfhtml.org,2005:/self Wann externes SVG über CSS stylen? – SELFHTML-Forum 2019-03-26T10:15:18Z https://forum.selfhtml.org/self/2019/mar/25/wann-externes-svg-ueber-css-stylen/1745397#m1745397 MB 2019-03-25T16:22:10Z 2019-03-25T16:22:10Z Wann externes SVG über CSS stylen? <p>moin,</p> <p>ich habe erfahren, dass man <em>SVG</em>'s nur über direkte Einbindung im <em>HTML</em>-Code mit <em>CSS</em> stylen kann. Über jeglichen Import gehts nicht , jedenfalls hab ich noch nie was davon gehört.</p> <p>Aber tauch der Gedanke bei den <strong>W3C</strong> Entwicklern auf? Und Arbeiten die dran das man extern <em>SVG</em>'s stylen kann??? Aufjedenfall interessiert es mich brennent.</p> <p>lgmb</p> https://forum.selfhtml.org/self/2019/mar/25/wann-externes-svg-ueber-css-stylen/1745399#m1745399 dedlfix 2019-03-25T16:30:15Z 2019-03-25T16:30:15Z Wann externes SVG über CSS stylen? <p>Tach!</p> <blockquote> <p>ich habe erfahren, dass man <em>SVG</em>'s nur über direkte Einbindung im <em>HTML</em>-Code mit <em>CSS</em> stylen kann. Über jeglichen Import gehts nicht , jedenfalls hab ich noch nie was davon gehört.</p> </blockquote> <p>Mit etwas Hilfe von Javascript kann man erreichen, dass das referenzierte Bild zum eingebundenen wird, was man dann CSSen kann: <a href="https://stackoverflow.com/a/43015413/1523086" rel="noopener noreferrer">https://stackoverflow.com/a/43015413/1523086</a>.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2019/mar/25/wann-externes-svg-ueber-css-stylen/1745405#m1745405 ThomasM 2019-03-25T19:50:48Z 2019-03-25T19:50:48Z Wann externes SVG über CSS stylen? <p>Hallo MB,</p> <blockquote> <p>ich habe erfahren, dass man <em>SVG</em>'s nur über direkte Einbindung im <em>HTML</em>-Code mit <em>CSS</em> stylen kann. Über jeglichen Import gehts nicht , jedenfalls hab ich noch nie was davon gehört.</p> <p>Aber tauch der Gedanke bei den <strong>W3C</strong> Entwicklern auf? Und Arbeiten die dran das man extern <em>SVG</em>'s stylen kann??? Aufjedenfall interessiert es mich brennent.</p> </blockquote> <p>Inhalte von svg-Elementen, die in HTML direkt eingebunden sind, lassen sich auch über externe Stylesheets im head des HTML-Dokuments erreichen.</p> <p>Für externe SVG-Dokumente, etwa mittels object eingebunden, kann wie bei XML üblich diese Verarbeitungsanweisung verwendet werden:</p> <pre><code class="block language-xml"><span class="token prolog"><?xml-stylesheet href="name.css" type="text/css"?></span> </code></pre> <p>Grüße,<br> Thomas</p> https://forum.selfhtml.org/self/2019/mar/25/wann-externes-svg-ueber-css-stylen/1745404#m1745404 MB 2019-03-25T19:40:16Z 2019-03-25T19:40:16Z Wann externes SVG über CSS stylen? <p>moin,</p> <blockquote> <blockquote> <p>ich habe erfahren, dass man <em>SVG</em>'s nur über direkte Einbindung im <em>HTML</em>-Code mit <em>CSS</em> stylen kann. Über jeglichen Import gehts nicht , jedenfalls hab ich noch nie was davon gehört.</p> </blockquote> <p>Mit etwas Hilfe von Javascript kann man erreichen, dass das referenzierte Bild zum eingebundenen wird, was man dann CSSen kann: <a href="https://stackoverflow.com/a/43015413/1523086" rel="noopener noreferrer">https://stackoverflow.com/a/43015413/1523086</a>.</p> </blockquote> <p>jo, das machen so ziehmlich alle Responsive Frameworks die ich kenne mit externer <em>SVG</em>-Einbindung . Sorry, ich muss die Frage präzisieren: Gibt es externe <em>SVG</em>'s die in <em>HTML</em> eingebunden und von <em>CSS</em> gesteuert werden ohne Skript unterstützung wie <em>JS</em>?</p> <p>lgmb</p> https://forum.selfhtml.org/self/2019/mar/25/wann-externes-svg-ueber-css-stylen/1745408#m1745408 MB 2019-03-25T21:17:52Z 2019-03-25T21:17:52Z Wann externes SVG über CSS stylen? <p>moin,</p> <blockquote> <p>Für externe SVG-Dokumente, etwa mittels object eingebunden, kann wie bei XML üblich diese Verarbeitungsanweisung verwendet werden:</p> <pre><code class="block language-xml"><span class="token prolog"><?xml-stylesheet href="name.css" type="text/css"?></span> </code></pre> </blockquote> <p>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.</p> <p>lgmb</p> https://forum.selfhtml.org/self/2019/mar/25/wann-externes-svg-ueber-css-stylen/1745409#m1745409 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-03-25T21:34:35Z 2019-03-25T21:34:35Z Wann externes SVG über CSS stylen? <p>@@MB</p> <blockquote> <blockquote> <p>Für externe SVG-Dokumente, etwa mittels object eingebunden, kann wie bei XML üblich diese Verarbeitungsanweisung verwendet werden:</p> </blockquote> </blockquote> <p>Und ich hab’s mit <code>img</code> versucht …</p> <blockquote> <p>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.</p> </blockquote> <p><a href="https://bittersmann.de/test/colored-circle" lang="en" rel="nofollow noopener noreferrer">A colored circle</a></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/mar/25/wann-externes-svg-ueber-css-stylen/1745411#m1745411 MB 2019-03-25T23:03:28Z 2019-03-25T23:03:28Z Wann externes SVG über CSS stylen? <p>moin,</p> <blockquote> <blockquote> <p>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.</p> </blockquote> <p><a href="https://bittersmann.de/test/colored-circle" lang="en" rel="nofollow noopener noreferrer">A colored circle</a></p> </blockquote> <p>Danke. Geht in deinem Beispie auch interaktive <em>CSS</em> dynamik ohne skript unterstützung <em>(z.B.:</em> <code>:hover</code><em>,</em> <code>:focus</code><em>)</em>? Das is ja meine Ausgangsfrage. Sonst muss ich mir eigens per <em>PHP</em> was zusammen basteln damit die <em>Glyphicons</em> funktionalität auch erhalten bleibt: veränderbare größe und farbe. Frisst ladezeit und ist umschön wenn <em>SVG</em>'s kreuz und quer im <em>HTML</em>-quellcode verteilt sind .</p> <p>lgmb</p> https://forum.selfhtml.org/self/2019/mar/25/wann-externes-svg-ueber-css-stylen/1745412#m1745412 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-03-26T02:13:56Z 2019-03-26T02:13:56Z Wann externes SVG über CSS stylen? <p>@@MB</p> <blockquote> <p>Geht in deinem Beispie auch interaktive <em>CSS</em> dynamik ohne skript unterstützung <em>(z.B.:</em> <code>:hover</code><em>,</em> <code>:focus</code><em>)</em>?</p> </blockquote> <p>Du suchst <code>currentColor</code>? <a href="https://codepen.io/gunnarbittersmann/pen/Ooypov" lang="en" rel="noopener noreferrer">Sweet home </a></p> <p>S.a. den Abschnitt beginnend mit „Nun wollen wir nicht irgendeine Größe; und auch die Farbe festlegen“ im <a href="https://forum.selfhtml.org/self/2018/aug/23/icon-png-mit-transperenten-hintergrund-mittels-css-faerben/1729891#m1729891" rel="noopener noreferrer">ersten Teil meines Tutorials</a>.</p> <blockquote> <p><em>Glyphicons</em></p> </blockquote> <p>Du verwendest <code>symbol</code> und <code>use</code>? Siehe ganzen ersten und <a href="https://forum.selfhtml.org/self/2018/aug/23/icon-png-mit-transperenten-hintergrund-mittels-css-faerben/1729898#m1729898" rel="noopener noreferrer">zweiten Teil</a>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/mar/25/wann-externes-svg-ueber-css-stylen/1745415#m1745415 MB 2019-03-26T08:05:57Z 2019-03-26T08:05:57Z Wann externes SVG über CSS stylen? <p>moin,</p> <p>Besten Dank! Ich muss mich da einlesen.</p> <p>lgmb</p> https://forum.selfhtml.org/self/2019/mar/25/wann-externes-svg-ueber-css-stylen/1745426#m1745426 MB 2019-03-26T10:15:18Z 2019-03-26T10:15:18Z Wann externes SVG über CSS stylen? <p>moin,</p> <p>Dank nochmals. Hab ne simple Klasse geschrieben was <em>XML</em> importiert, zusätzlich noch ein <em>String</em> im <em>Attribute-Node</em> einfügt und als <em>XML</em> ausgibt.</p> <p>lgmb</p>