В настоящее время у меня есть скрипт Python bs4, который загружает файл .svg и позволяет мне изменить в нем некоторый текст, цвета и некоторые другие вещи.
Сегодня я решил начать работу над SaaS-версией этого скрипта. Я решил, что я, вероятно, буду использовать Python/Django для серверной части на случай, если мне понадобится выполнить некоторую работу над svg в серверной части через bs4, и React для интерфейса, поскольку это действительно единственная технология интерфейса, с которой я знаком. .
Но у меня проблемы с загрузкой, редактированием и отображением файлов .svg в React. Я использовал axios для загрузки .svg (в настоящее время он размещен локально, но в будущем он будет на AWS или что-то в этом роде) и jssoup пакет npm для поиска элементов в моем svg.
Вот мой текущий код:
import React, { useEffect, useState } from "react";
import axios from "axios";
import JSSoup from "jssoup";
function App() {
const [pic, setPic] = useState("");
useEffect(() => {
axios
.get("./newfile.svg")
.then((res) => {
var soup = new JSSoup(res.data, false);
let elements = soup.findAll("g");
console.log(elements);
setPic(soup.prettify());
})
.catch((err) => console.log("Error, ", err));
}, []);
return (
<div className="App">
<img src={`data:image/svg+xml;utf8,${pic}`} />
</div>
);
}
export default App;
Первый вопрос: использую ли я правильный инструмент для работы? Способен ли JavaScript вообще на такую работу? Следующий вопрос: как я должен показать .svg после некоторой работы над ним с помощью jssoup?
