tag:forum.selfhtml.org,2005:/selfWann externes SVG über CSS stylen? – SELFHTML-Forum2019-03-26T10:15:18Zhttps://forum.selfhtml.org/self/2019/mar/25/wann-externes-svg-ueber-css-stylen/1745397#m1745397MB2019-03-25T16:22:10Z2019-03-25T16:22:10ZWann 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#m1745399dedlfix2019-03-25T16:30:15Z2019-03-25T16:30:15ZWann 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#m1745405ThomasM2019-03-25T19:50:48Z2019-03-25T19:50:48ZWann 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#m1745404MB2019-03-25T19:40:16Z2019-03-25T19:40:16ZWann 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#m1745408MB2019-03-25T21:17:52Z2019-03-25T21:17:52ZWann 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#m1745409Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2019-03-25T21:34:35Z2019-03-25T21:34:35ZWann 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#m1745411MB2019-03-25T23:03:28Z2019-03-25T23:03:28ZWann 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#m1745412Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2019-03-26T02:13:56Z2019-03-26T02:13:56ZWann 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#m1745415MB2019-03-26T08:05:57Z2019-03-26T08:05:57ZWann 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#m1745426MB2019-03-26T10:15:18Z2019-03-26T10:15:18ZWann 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>