Animiertes SVG einbinden

Antworten
#1
12.08.2017 22:44
avatar  HugoBeck
#1
Hu
HugoBeck

Hallo zusammen!

Ich habe mittels Illustrator ein paar Pfade erstellt und möchte diese auf meiner Jimdo-Seite animieren bzw. erstmal einbinden.

Über Copy-Paste kann man den Pfad aus Illustrator mundgerecht für die Einbindung auf einer Website exportieren.

Das sieht dann wie folgt aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In  -->
<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="346px" height="296.4px" viewBox="0 0 346 296.4" style="enable-background:new 0 0 346 296.4;"
	 xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<path id="XMLID_16_" class="st0" d="M151.6,47.8C112.3,81.3,74.1,116.1,37,152.1c-10.4,10.1-20.8,20.5-27.5,33.3
	c-6.2,11.9-8.9,25.6-7.7,39c0.7,7.4,2.7,14.9,7.3,20.7c10,12.3,28.5,13,44.1,10c21.2-4.1,41.5-13.1,58.8-26
	c19-14.2,34.3-33,54.5-45.5c24.7-15.3,55.8-19.9,83.8-12.3c3.7,1,7.5,2.3,10.1,5.2c7.6,8.4-0.9,21.3-9.2,28.9
	c-35.7,32.8-75.8,60.4-115.6,88c22.9,0.5,45.8,1.1,68.6,1.6c6.7,0.2,13.6,0.3,19.8-2.1c5.4-2.1,9.9-5.9,13.9-9.9
	c27-27,37.2-66.4,43.5-104.1c5.7-34.3,9.1-69,10.2-103.7c0.4-13.4,0.4-27.4-4.9-39.7c-9.4-21.6-34-33.8-57.5-33.8
	c-23.5,0-46,10.4-65.5,23.5c33.2,18.8,73.1,19.8,111.2,22.2c13.7,0.9,27.9,2.1,39.9,9c15.9,9.2,25.2,27.1,28.3,45.3
	c3.1,18.1,0.7,36.7-1.6,54.9c-44.3-30.2-98.3-45.9-151.9-44.2"/>
</svg>
 
 



Wenn ich jetzt ein HTML Dokument schreibe, den Code dort einsetze und die .html im Browser betrachte klappt auch alles. Die Animation mache ich dann entweder direkt im SVG oder per CSS (hier erstmal nicht so wichtig)

Mein Problem ist jetzt, dass ich diesen Code zwar auf Jimdo -> +Inhalt hinzufügen -> Widget/HTML einfügen kann, aber mir nach dem Speichern nichts angezeigt wird. Jimdo scheint den Code nicht zu verstehen.

Hatte jemand schonmal dieses Problem und kann mir weiterhelfen?

Den Pfad aus Illustrator als .svg zu speichern und dann z.b per

1
2
3
4
5
 
<object data="Pfad.svg" type="image/svg+xml">
 
oder
 
<object data="Pfad.svg" type="image/svg+xml">
 



einzubinden funktioniert, aber dann kann ich die Pfade später nicht animieren.

Vielen Dank und lieben Gruß!


 Antworten

 Beitrag melden
#2
14.01.2020 08:33
avatar  D.F.
#2
D.
D.F.

Hallo zusammen,

kann man diesen Beitrag noch mal aufleben lassen?
Ich stehe vor exakt der selben Problematik.

BG


 Antworten

 Beitrag melden
#3
18.01.2020 14:14
avatar  az_
#3
avatar
az_

probier mal:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 

<style type="text/css">
    .st0 {
        fill: none;
        stroke: #000000;
        stroke-width: 3;
        stroke-miterlimit: 10;
    }
 
</style>
 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="346px" height="296.4px" viewBox="0 0 346 296.4" style="enable-background:new 0 0 346 296.4;" xml:space="preserve">
 
    <defs>
    </defs>
    <path id="XMLID_16_" class="st0" d="M151.6,47.8C112.3,81.3,74.1,116.1,37,152.1c-10.4,10.1-20.8,20.5-27.5,33.3
	c-6.2,11.9-8.9,25.6-7.7,39c0.7,7.4,2.7,14.9,7.3,20.7c10,12.3,28.5,13,44.1,10c21.2-4.1,41.5-13.1,58.8-26
	c19-14.2,34.3-33,54.5-45.5c24.7-15.3,55.8-19.9,83.8-12.3c3.7,1,7.5,2.3,10.1,5.2c7.6,8.4-0.9,21.3-9.2,28.9
	c-35.7,32.8-75.8,60.4-115.6,88c22.9,0.5,45.8,1.1,68.6,1.6c6.7,0.2,13.6,0.3,19.8-2.1c5.4-2.1,9.9-5.9,13.9-9.9
	c27-27,37.2-66.4,43.5-104.1c5.7-34.3,9.1-69,10.2-103.7c0.4-13.4,0.4-27.4-4.9-39.7c-9.4-21.6-34-33.8-57.5-33.8
	c-23.5,0-46,10.4-65.5,23.5c33.2,18.8,73.1,19.8,111.2,22.2c13.7,0.9,27.9,2.1,39.9,9c15.9,9.2,25.2,27.1,28.3,45.3
	c3.1,18.1,0.7,36.7-1.6,54.9c-44.3-30.2-98.3-45.9-151.9-44.2" />
</svg>
 

 


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#4
12.06.2023 16:25
avatar  GHF
#4
GH
GHF

Ich habe es so verstanden, dass das Einbinden von <svg> Elementen in Jimdo Widgets nicht erlaubt ist... das habe ich als Antwort bei einer Supportanfrage an das Jimdo Team erfahren.

Warum das so ist, darüber kann ich nur spekulieren.


 Antworten

 Beitrag melden
#5
03.07.2023 18:47
avatar  az_
#5
avatar
az_

Wenn ich mich richtig erinnere, liegt das an HTML Editor, der nur eine bestimmte Syntax akzeptiert. Ich weiß jetzt nicht, auf welchen Test Seiten ich SVG eingebunden habe. Du kannst ja mal googeln:
Redesign Berlin + SVG + Jimdo
Oder schau mal auf meinen Beispiel Seiten und suche dort nach SVG.
Wenn du eine Testseite gefunden hast, auf der ich SVG eingebunden habe, gehe in den Quelltext und kopiere dir von dort das Bild heraus. Dann kannst du aufschlüsseln, wie genau die Syntax für Jimdo aufbereitet werden muss, damit SVG akzeptiert wird.
LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#6
07.07.2024 21:20
avatar  az_
#6
avatar
az_


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!