Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets
Das SVG ist zum Beispiel mit Icons und diese sind verlinkt. Das ist durch Objekt-Tag wiederzugeben und ist gar nicht nur so als Spielerei. Bspw die Beschreibung von einem Dashboard, das mit vielerlei Einstellungen ist. Nehmen wir mal an, das Dashboard auf deinem Web-Host-Server und du stehst ganz am Anfang deiner Karriere. Da ist doch eine gute Info sehr gefragt! – lass dir zeigen, wie das gemeint ist.
Anklicke da oben die linkerseits und grau hinterlegten Begriffe. Da gehts so bspw zur Gebrauchsanweisung. Anklicke, so öffnet die verlinkte Website im Bild und ist dann zum Scrollen. Um wieder zurück des Bilds der Übersicht ist die Seite hier neu zu laden, darum ist hier auch der ‘Reload’ Button. Oder passender die Links mit Rechtsklick und somit ist die Website in neuem Tab zu öffnen.
So nun weiter im Bspw zur Herstellung des SVG mit den Links. Im erstens ist die Vorlage das Dashboard als Bildschirmfoto.png. Infolge ist das im SVG-Programm zu öffnen. Des Dashboards als PNG-Bild sind dort die Punkte und die Icons der Mittelpunkt. Diese sind so mit einem Rechteck Opazität null zu verlinken. Zur Fertigstellung ist das im Ganzen als SVG-Format abzuspeichern. … Dann ist das als Beschreibung für den Benutzer. Und durch Anklicken der Icons geht es gleich zur Info…
Inhaltsverzeichnis
WordPress und SVG
Im object-Tag das SVG mit verlinkten Icons
- Zuerst darf ich vorstellen ‘mediaevent.de Stil mit Stil’ dort im Titel Sieben Wege, SVG in HTML-Seiten.
So Vektorgrafik wie hier bspw. Da sind auch Icons mit Links dabei. Diese sind dann mit Rechtsklick zu öffnen. Im direkten anklicke der Links öffnen sich diese in einem Scroller.
Das SVG-Bild größer → Anklicke oder in Groß so mit Rechtsklick und ‘Link in neuem Tab öffnen’. Dieser Spielart (Anklicke) dann das von Light-Box ist das unterhalb der Überschrift “Und wie von selbst…” nochmal im Beschrieb
OT: Das SVG ist fast 450 kB …
target="_blank" vom SVG. Allein mit Plug-in Safe SVG Version 1.9.8.Das SVG im Objekt-Tag
Dieser Code zur Anwendung:
<object data="https://wegerl.at/wp-content/uploads/2020/08/Jitsi-Meet_noopener.svg" type="image/svg+xml" width="600" height="300"><!-- Für Browser ohne SVG-Unterstützung --><img src="https://wegerl.at/wp-content/uploads/2020/08/Jitsi-Meet.png" width="600" height="300" alt="Alternatives PNG-Bild" /></object>
Nach der Umstellung von Größe und umschalten des Modus von ‘Text’ in ‘Visuell’ ändert bzw. ergänzt sich der Code.
<object data="https://wegerl.at/wp-content/uploads/2020/08/Jitsi-Meet_noopener.svg" type="image/svg+xml" width="600" height="300"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><!-- Für Browser ohne SVG-Unterstützung --><img src="https://wegerl.at/wp-content/uploads/2020/08/Jitsi-Meet.png" width="600" height="300" alt="Alternatives PNG-Bild" /></object>… Das ist sehr eigenartig! Infolge ergeht das nämlich erst nach der Änderung von der Größe.
Der Code hält wie eingegeben so:
- Den Code
<objekt data=… … …</objekt>in Text, - die Datei-URL einfügen und
- die Größe editieren.
- Dann den gesamten Code kopieren und erneut einfügen.
…da bleibt der Code wie gehabt. Dabei zur Beachtung! – wenn das SVG hier von der Größe sehr zu viel eingestellt ist, erfolgt wiederum die Ergänzung des Codes. Ja, und jeweiligen hin- und herschalten von Text / Visuell vermehren sich diese.
Also hier, Nein! – da nützt auch nicht, das mit <div>. Das in <div><objekt data=… … …</objekt></div>, das funkt nicht.
Und nächst das Bspw, mit Plug-in SVG Support.
Das SVG im img-Tag
Das Beispiel ist hier nicht, da dies, so, nicht funkt. Das hat aber nicht direkt mit dem Plug-in zu tun …
… mit Plug-in SVG Support. Der Einstellung ‘Enable Advanced Mode / ja’
<img class="style-svg" alt="alt-text" src="image-source.svg" />
Im direkten Anklicken der verlinkten Icons öffnen die nicht in einem Scroller. Aber nicht so, wie nämlich die Links als target="_blank" sind.
Des nächst fiel auf, dass nach ‘Veröffentlichen’ das zweite SVG mit den verlinkten Icons nicht funkte. Daher habe ich das Bspw hier auf
Das mit der Größe vom SVG
Die Größe im Modus-Visuell mit ziehen. Oder eine Class erstellen. Bspw:
.logo-class { width: 50%; }Das mit den ‘margins’
… und die Position ist wie normalen img-Bild.
Wie auch immer …
Die Zusammenfassung ist, dass am MAMP allein mit Plug-in Safe SVG oder SVG Support das mit dem Link target="_blank" funktioniert.
Und wie von selbst…
Und wie von selbst funktioniert das alles, mit dem Plug-in Easy FancyBox. Das Bild ist frugal durch ‘Dateien hinzufügen’ visuell, das dann mit Link zur Mediendatei. So nach Anklicken des Bilds öffnet die Light-Box und von dort sind die Verlinkungen anklickbar.
Aktualisiert im Jahr 2022-August
Loading ...
