Ich habe einen komplexen Bauplan, den ich in Inkscape nachgezeichnet habe. Ich werde den Pfad programmgesteuert animieren und auch einige andere Effekte mit JavaScript hinzufügen. Ich kann die Datei mit HTML einbinden (z. B. <img src="filename.svg"/>), aber wie bearbeite ich dann jeden Pfad in dieser SVG-Datei?
Bisher habe ich die Werte manuell durch Kopieren und Einfügen (z. B. <svg><path d="x,y x,y x,y..."/>) in HTML übertragen. Ich kann dann jedem Pfad IDs und Klassen zuweisen und diese IDs und Klassen verwenden, um die Pfade mit JavaScript zu manipulieren, aber es ist extrem zeitaufwendig. Dafür muss es einen besseren und schnelleren Weg geben.
Ich habe überall gesucht und konnte nur Anweisungen zum Exportieren von Pfaden mit Python finden, das ich auf diesem Windows-System nicht installiert habe.
Gibt es Möglichkeiten, dies nativ in Inkscape zu tun? Oder andere Möglichkeiten, die Ihnen bekannt sind?
Wenn Sie von Ihrem HTML aus auf das SVG zugreifen möchten (z. B. um mit JavaScript zu animieren oder mit CSS zu stylen), müssen Sie das SVG inline verwenden (wie beim Einfügen des rohen SVG-Codes in das HTML), wenn Sie Ihr SVG mit verwenden B. ein <img>Tag oder als CSS-Hintergrundbild, können Sie von Ihrem HTML-Dokument aus nicht auf das DOM des SVG zugreifen.
Wenn Sie eine serverseitige Sprache wie PHP verwenden, können Sie Ihre Datei am einfachsten einbinden, indem Sie den Inhalt der Datei einbinden. etwas wie:
<?php echo file_get_contents("my_svg.svg"); ?>
Dadurch wird der Inhalt der SVG-Datei buchstäblich im HTML-Code gedruckt, im Gegensatz zur Verwendung eines <img>Tags, das das Bild einfach rendert.
Wenn Sie ausschließlich mit HTML arbeiten, müssen Sie den SVG-Code kopieren und in Ihren HTML-Code einfügen, aber Sie können das gesamtepath SVG kopieren und einfügen, ohne dass Sie bestimmte Attribute oder ähnliches abrufen müssen . Da SVG einfach XML ist, können Sie die Datei in einem Texteditor (z. B. Notepad oder TextEdit) oder Ihrem HTML-Editor öffnen und den Code abrufen.
Inkscape hat einen XML-Editor , der für Sie nützlich sein könnte, ich bin mir jedoch nicht sicher, ob Sie den gesamten Code von dort kopieren können. Es ist auch erwähnenswert, dass Inkscape standardmäßig Dateien als eigenen SVG-Typ mit einigen Inkscape-spezifischen Tags und Befehlen speichert (sie haben einen angemessenen Namensraum, sodass dies kein Problem verursachen sollte, aber Sie wissen nie), sodass es möglicherweise besser ist, sie zu speichern Ihre Datei als einfaches SVG .
Sie können mehr über die Verwendung von SVG (und den Zugriff auf SVG mit externem JavaScript und CSS) in diesem CSS-Tricks-Artikel lesen (ich habe auf den relevanten Teil des Artikels verlinkt):
Und eine verwandte Frage zu Stack Overflow:
inkscapeNamensraum ein, was vollkommen gültiges SVG ist. Die meisten Anwendungen (und Browser) haben damit keine Probleme und ignorieren es. Einfaches SVG entfernt all diese zusätzlichen Informationen und wird normalerweise nur benötigt, wenn eine Anwendung nicht gut mit dem zusätzlichen Namespace spielt.
Vinzenz