я распарсил сайт и достал svg (слоями) есть ли какая-то библиотека для REACT или JS которая сможет собрать исходный SVG?
Кусок примера
"parts": {
"Quin-fix": "<g id=\"Quin_-fix\">
<g id=\"_x33__00000126299276090262442540000016471221998082769802_\" class=\"st0\">
<path class=\"st1\" d=\"M57.6,97.7L57.6,97.7c-4.8,0-8.8-3.9-8.8-8.8v0c0-4.8,3.9-8.8,8.8-8.8l0,0c4.8,0,8.8,3.9,8.8,8.8v0 C66.3,93.8,62.4,97.7,57.6,97.7z\"\/>
<path class=\"st1\" d=\"M118.5,97.7L118.5,97.7c-4.8,0-8.8-3.9-8.8-8.8v0c0-4.8,3.9-8.8,8.8-8.8l0,0c4.8,0,8.8,3.9,8.8,8.8v0 C127.3,93.8,123.4,97.7,118.5,97.7z\"\/>
<path class=\"st2\" d=\"M88.1,129.4H88c-16.6,0-30.1-13.5-30.1-30.1V79.3c0-16.6,13.5-30.1,30.1-30.1h0.1 c16.6,0,30.1,13.5,30.1,30.1v19.9C118.2,115.9,104.7,129.4,88.1,129.4z\"\/>
<path class=\"st3\" d=\"M77.6,83.9c0,1.5-1.2,2.7-2.7,2.7c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7 C76.4,81.2,77.6,82.4,77.6,83.9z\"\/>
Ответы (1 шт):
Для этого не нужны никакие библиотеки. Собрать svg можно средствами DOM API.
Для создания SVGSVGElement существует метод document.createElementNS(). Отличие от document.createElement() в том, что document.createElementNS() создает элемент с указанием пространства имен URI.
Пространства имен XML предоставляют простой метод уточнения имен элементов и атрибутов, используемых в документах Extensible Markup Language, путем связывания их с пространствами имен, идентифицированными ссылками URI.
Это нужно, чтобы браузер понимал с какой разметкой он имеет дело.
Можно не заморачиваться и создать функцию, которая создаст svg элемент и добавить в него нужное содержимое через innerHTML:
const source = {
"parts": {
"Quin-fix": `
<g id=\"Quin_-fix\">
<g id=\"_x33__00000126299276090262442540000016471221998082769802_\" class=\"st0\">
<path class=\"st1\" d=\"M57.6,97.7L57.6,97.7c-4.8,0-8.8-3.9-8.8-8.8v0c0-4.8,3.9-8.8,8.8-8.8l0,0c4.8,0,8.8,3.9,8.8,8.8v0 C66.3,93.8,62.4,97.7,57.6,97.7z\"\/>
<path class=\"st1\" d=\"M118.5,97.7L118.5,97.7c-4.8,0-8.8-3.9-8.8-8.8v0c0-4.8,3.9-8.8,8.8-8.8l0,0c4.8,0,8.8,3.9,8.8,8.8v0 C127.3,93.8,123.4,97.7,118.5,97.7z\"\/>
<path class=\"st2\" d=\"M88.1,129.4H88c-16.6,0-30.1-13.5-30.1-30.1V79.3c0-16.6,13.5-30.1,30.1-30.1h0.1 c16.6,0,30.1,13.5,30.1,30.1v19.9C118.2,115.9,104.7,129.4,88.1,129.4z\"\/>
<path class=\"st3\" d=\"M77.6,83.9c0,1.5-1.2,2.7-2.7,2.7c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7 C76.4,81.2,77.6,82.4,77.6,83.9z\"\/>
</g>
</g>`
}
}
function createSVGFromParts(parts) {
/**
* создаем SVG
*/
const element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
/**
* перебираем куски из объекта
*/
for (let part in parts) {
element.innerHTML += parts[part]; // добавляем в svg
}
return element;
}
document.body.append(createSVGFromParts(source.parts));Такой вариант простой, но у него есть минусы:
innerHTML- это небезопасно- Текст никак не валидируется
Вариант посложнее, где сначала текст парсится с помощью DOMParser. Он покажет ошибки в разметке, а так же даст возможность выполнять любые манипуляции с document, который будет возвращен из метода DOMParser.parseFromString(), до вставки в основной документ. Например, убрать элементы с тэгом script или задать атрибут fill для path.
const source = {
"parts": {
"Quin-fix": `
<g id=\"Quin_-fix\">
<g id=\"_x33__00000126299276090262442540000016471221998082769802_\" class=\"st0\">
<path class=\"st1\" d=\"M57.6,97.7L57.6,97.7c-4.8,0-8.8-3.9-8.8-8.8v0c0-4.8,3.9-8.8,8.8-8.8l0,0c4.8,0,8.8,3.9,8.8,8.8v0 C66.3,93.8,62.4,97.7,57.6,97.7z\"\/>
<path class=\"st1\" d=\"M118.5,97.7L118.5,97.7c-4.8,0-8.8-3.9-8.8-8.8v0c0-4.8,3.9-8.8,8.8-8.8l0,0c4.8,0,8.8,3.9,8.8,8.8v0 C127.3,93.8,123.4,97.7,118.5,97.7z\"\/>
<path class=\"st2\" d=\"M88.1,129.4H88c-16.6,0-30.1-13.5-30.1-30.1V79.3c0-16.6,13.5-30.1,30.1-30.1h0.1 c16.6,0,30.1,13.5,30.1,30.1v19.9C118.2,115.9,104.7,129.4,88.1,129.4z\"\/>
<path class=\"st3\" d=\"M77.6,83.9c0,1.5-1.2,2.7-2.7,2.7c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7 C76.4,81.2,77.6,82.4,77.6,83.9z\"\/>
</g>
</g>`
}
};
function createSVGFromParts(parts) {
const svgNS = "http://www.w3.org/2000/svg";
const parser = new DOMParser(); // DOMParser, который с помощью метода parseFromString() спарсит текст и вернет document
const element = document.createElementNS(svgNS, "svg");
/**
* Из элемента созадет элемент с namespace URI(возможно есть способы попроще)
* Без этого элементы просто не будут правильно рендериться
*/
function _elementToElementNS(element) {
const elementNS = document.createElementNS(svgNS, element.tagName);
for (let attribute of element.attributes) {
elementNS.setAttribute(attribute.name, attribute.value);
}
for (let child of element.children) {
elementNS.append(_elementToElementNS(child));
};
return elementNS;
}
function _throwOnXMLParseError(dom) {
const parsererror = dom.getElementsByTagName('parsererror')[0];
if (!parsererror) return;
throw new Error('XMLParseError: ' + parsererror.textContent);
}
element.setAttribute('xmlns', svgNS);
try {
for (let part in parts) {
const dom = parser.parseFromString(parts[part], "application/xml");
_throwOnXMLParseError(dom);
element.appendChild(_elementToElementNS(dom.children[0]));
}
} catch(err) {
console.error(err);
}
return element;
}
document.body.append(createSVGFromParts(source.parts));Оба варианта рабочие, хоть и не идеальные.