Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
[SVG/Inkscape] Verstehe hyperlinks nicht - mit Beispiel
2 views
Skip to first unread message
Michael Uplawski
Dec 3, 2022, 1:29:42 AM12/3/22
to
Moin.
Es geht hier allgemein um das Styling von Hyperlinks in SVG, speziell um
Pseudo-styles.
Ich habe mehrere Links in SVG Dateien mittels externer Stylesheet-Datei
gestalten können. Ein Pseudo-Style :hover funktioniert aber nur
„meistens”.
Hier eine Beispieldatei, in der die oberen grünen Zeilen bereits mit
Hyperlinks ausgestattet sind, aber den Hover-Style *nicht* zeigen, wenn
die Grafik im Browser angeschaut wird (<object/>) :
https://www.uplawski.eu/div/svg/page1.svg
und die eingeschlossene CSS Datei:
https://www.uplawski.eu/div/svg/svg.css
In diesem Beispiel habe ich zusätzlich einen der Links mit einer Klasse
ausgestattet und diese im SVG Kopf definiert. Das funktioniert.
Das gesamte style tag:
------
<style type="text/css">
@import url('svg.css');
a.normal g {fill:#800000;opacity:1;}
</style>
------
Hier eine Datei, in der die Hyperlinks *und* der Hover-style
funktionieren:
https://www.uplawski.eu/div/svg/page2.svg
Im Unterschied zur ersten Datei habe ich hier die CSS-Datei mit
<xhtml:link/> definiert:
---------
<xhtml:link rel="stylesheet" href="svg.css" />
---------
Das habe ich auch in der anderen Datei so begonnen, funktioniert aber
auch nicht!
Der durchsichtige rechteckige Hintergrund sorgt im gelinkten
Objekt dafür, dass der Mausklick vereinfacht wird, ist aber meines
Erachtens für das Phenomen der fehlenden Hover-Styles nicht
verantwortlich. Wegen handschriftlichem Text, werden Pfade (<path/>)
verlinkt, was den code kompliziert macht; das macht aber ebenfalls
keinen Unterschied, wenn Inkscape zum Zeichnen verwendet wird.
Normalerweise bearbeite ich auch den SVG Code direkt in Inkscape; der
XML-Editor ist brauchbar, allerdings wohl für kleinere Zeichnungen
gedacht.
Meiner Meinung nach, gibt es einen Fehler in dieser Datei page1.svg. Der
XML-Code validiert aber. Es muss also ein SVG-spezifisches Problem
vorliegen.
Kennt sich jemand aus? Ich habe das Web schon ausgekratzt und hätte auch
sonst auch die funktionierenden Links kaum hinbekommen...
Ist kompliziert, glaube ich.
Schönes Wochenende
Michael
--
Le progrès, ce n'est pas l'acquisition de biens. C'est l'élévation de
l'individu, son émancipation, sa compréhension du monde. Et pour ça il
faut du temps pour lire, s'instruire, se consacrer aux autres.
(Christiane Taubira)
Es geht hier allgemein um das Styling von Hyperlinks in SVG, speziell um
Pseudo-styles.
Ich habe mehrere Links in SVG Dateien mittels externer Stylesheet-Datei
gestalten können. Ein Pseudo-Style :hover funktioniert aber nur
„meistens”.
Hier eine Beispieldatei, in der die oberen grünen Zeilen bereits mit
Hyperlinks ausgestattet sind, aber den Hover-Style *nicht* zeigen, wenn
die Grafik im Browser angeschaut wird (<object/>) :
https://www.uplawski.eu/div/svg/page1.svg
und die eingeschlossene CSS Datei:
https://www.uplawski.eu/div/svg/svg.css
In diesem Beispiel habe ich zusätzlich einen der Links mit einer Klasse
ausgestattet und diese im SVG Kopf definiert. Das funktioniert.
Das gesamte style tag:
------
<style type="text/css">
@import url('svg.css');
a.normal g {fill:#800000;opacity:1;}
</style>
------
Hier eine Datei, in der die Hyperlinks *und* der Hover-style
funktionieren:
https://www.uplawski.eu/div/svg/page2.svg
Im Unterschied zur ersten Datei habe ich hier die CSS-Datei mit
<xhtml:link/> definiert:
---------
<xhtml:link rel="stylesheet" href="svg.css" />
---------
Das habe ich auch in der anderen Datei so begonnen, funktioniert aber
auch nicht!
Der durchsichtige rechteckige Hintergrund sorgt im gelinkten
Objekt dafür, dass der Mausklick vereinfacht wird, ist aber meines
Erachtens für das Phenomen der fehlenden Hover-Styles nicht
verantwortlich. Wegen handschriftlichem Text, werden Pfade (<path/>)
verlinkt, was den code kompliziert macht; das macht aber ebenfalls
keinen Unterschied, wenn Inkscape zum Zeichnen verwendet wird.
Normalerweise bearbeite ich auch den SVG Code direkt in Inkscape; der
XML-Editor ist brauchbar, allerdings wohl für kleinere Zeichnungen
gedacht.
Meiner Meinung nach, gibt es einen Fehler in dieser Datei page1.svg. Der
XML-Code validiert aber. Es muss also ein SVG-spezifisches Problem
vorliegen.
Kennt sich jemand aus? Ich habe das Web schon ausgekratzt und hätte auch
sonst auch die funktionierenden Links kaum hinbekommen...
Ist kompliziert, glaube ich.
Schönes Wochenende
Michael
--
Le progrès, ce n'est pas l'acquisition de biens. C'est l'élévation de
l'individu, son émancipation, sa compréhension du monde. Et pour ça il
faut du temps pour lire, s'instruire, se consacrer aux autres.
(Christiane Taubira)
Michael Uplawski
Dec 3, 2022, 1:45:57 AM12/3/22
to
Kleine Ergänzung, Supercedes funktionieren ja nicht mehr überall, darum
als follow-up.
Michael Uplawski:
Bedeutung. Den Fehler habe ich selber noch übersehen...
>
> Das gesamte style tag:
> ------
> <style type="text/css">
> @import url('svg.css');
> a.normal g {fill:#800000;opacity:1;}
></style>
> ------
#800000 ist Tiefrot oder geht in die Richtung. Wenn irgendwas einfach in
die Tonne zu treten wäre, möchte ich auch diesen Ratschlag gerne
entgegennehmen.
Das wird ein bisschen viel.
Cheerio
als follow-up.
Michael Uplawski:
>> In diesem Beispiel habe ich zusätzlich einen der Links mit einer Klasse
> ausgestattet und diese im SVG Kopf definiert. Das funktioniert.
... nee. Funktioniert nicht richtig. Die Farbe hat ja auch noch eine
> ausgestattet und diese im SVG Kopf definiert. Das funktioniert.
Bedeutung. Den Fehler habe ich selber noch übersehen...
>
> Das gesamte style tag:
> ------
> <style type="text/css">
> @import url('svg.css');
> a.normal g {fill:#800000;opacity:1;}
></style>
> ------
die Tonne zu treten wäre, möchte ich auch diesen Ratschlag gerne
entgegennehmen.
Das wird ein bisschen viel.
Cheerio
Michael Uplawski
Dec 3, 2022, 1:46:25 PM12/3/22
to
N'abend.
Beim Versuch die bisherige HTML-Seite mit Inline-SVG nachzubauen, statt
ein object-Tag zu verwenden, bin ich auf störende Details in den
SVG-Dateien gestoßen.
Inkscape verwendet Namespaces svg und xlink, die beim Stylen mit CSS
stören. Ich habe darum alle Namespace-Prefixes entfernt und komme jetzt
mit der Datei klar.
Es sind zunächst aktualisierte Beispieldateien zu melden:
<object/> : https://www.uplawski.eu/div/svg/page1.html
Inline-SVG: https://www.uplawski.eu/div/svg/page1b.html
Beide Seiten funktionieren augenscheinlich korrekt.
Was bleibt, ist leider, dass SVG aus Inkscape nicht blind in HTML
referenziert werden kann, wenn Ansprüche wie meine gestellt werden.
Wenn ich recht habe, bestand der Fehler in der ursprünglichen Version
darin, dass <svg: namespace und xlink: vor href-Attributen
stehengeblieben sind.
Damit ist es mir nicht mehr ohne weiteres möglich, weitere Seiten dieser
Art automatisch zu generieren. Es ist zu viel spezielle Manipulation in
den Grafikdateien nötig. :(
Statt Grafikbearbeitung ist das jetzt Programmierarbeit. Nicht, was ich
wollte.
Alles ohne Gewähr...
Beim Versuch die bisherige HTML-Seite mit Inline-SVG nachzubauen, statt
ein object-Tag zu verwenden, bin ich auf störende Details in den
SVG-Dateien gestoßen.
Inkscape verwendet Namespaces svg und xlink, die beim Stylen mit CSS
stören. Ich habe darum alle Namespace-Prefixes entfernt und komme jetzt
mit der Datei klar.
Es sind zunächst aktualisierte Beispieldateien zu melden:
<object/> : https://www.uplawski.eu/div/svg/page1.html
Inline-SVG: https://www.uplawski.eu/div/svg/page1b.html
Beide Seiten funktionieren augenscheinlich korrekt.
Was bleibt, ist leider, dass SVG aus Inkscape nicht blind in HTML
referenziert werden kann, wenn Ansprüche wie meine gestellt werden.
Wenn ich recht habe, bestand der Fehler in der ursprünglichen Version
darin, dass <svg: namespace und xlink: vor href-Attributen
stehengeblieben sind.
Damit ist es mir nicht mehr ohne weiteres möglich, weitere Seiten dieser
Art automatisch zu generieren. Es ist zu viel spezielle Manipulation in
den Grafikdateien nötig. :(
Statt Grafikbearbeitung ist das jetzt Programmierarbeit. Nicht, was ich
wollte.
Alles ohne Gewähr...
Michael Uplawski
Dec 5, 2022, 7:40:59 AM12/5/22
to
Michael Uplawski:
(stroke), enthält der XML-Code dennoch stroke und stroke-width im
Inline-style.
Ein zentralisiertes Stylesheet überschreibt diese Attribute nicht!
Eine Automatisierungsroutine muss sich auch darum kümmern, und alle
inline styles mit stroke und stroke-width ausmerzen, bevor an zentrale
Stylesheet-Dateien gedacht werden kann.
>> Wenn ich recht habe, bestand der Fehler in der ursprünglichen Version
> darin, dass <svg: namespace und xlink: vor href-Attributen
> stehengeblieben sind.
Und zusätzlich: Wo in Inkscape keine Umrisslinien sichtbar sind
> darin, dass <svg: namespace und xlink: vor href-Attributen
> stehengeblieben sind.
(stroke), enthält der XML-Code dennoch stroke und stroke-width im
Inline-style.
Ein zentralisiertes Stylesheet überschreibt diese Attribute nicht!
Eine Automatisierungsroutine muss sich auch darum kümmern, und alle
inline styles mit stroke und stroke-width ausmerzen, bevor an zentrale
Stylesheet-Dateien gedacht werden kann.
0 new messages