Как вставить svg в svg?

Question

vaskadogana @vaskadogana

Frontend developer

React
SVG

Как вставить svg в svg?

Добрый день
у меня есть свг в таком виде

function task_parking(nameOfClass) { return 	<svg  viewBox="0 0 22 22" width="22" className = {nameOfClass}>
														<path fill="#FFF" className="back" d="M4 20.5c-1.4 0-2.5-1.1-2.5-2.5V4c0-1.4 1.1-2.5 2.5-2.5h14c1.4 0 2.5 1.1 2.5 2.5v14c0 1.4-1.1 2.5-2.5 2.5H4z" />
														<path fill= '#739eff' className="border" d="M18 2c1.1 0 2 0.9 2 2v14c0 1.1-0.9 2-2 2H4c-1.1 0-2-0.9-2-2V4c0-1.1 0.9-2 2-2H18M18 1H4C2.3 1 1 2.3 1 4v14c0 1.7 1.3 3 3 3h14c1.7 0 3-1.3 3-3V4C21 2.3 19.7 1 18 1L18 1z"/>
														<path fill= '#739eff' className="symbol" d="M12 7h-2H8v6 2h2v-2h2c1.1 0 3-1.1 3-3S13.1 7 12 7zM12 11h-2V9h2c0 0 1 0.2 1 1S12 11 12 11z" />
													</svg>
}

фунция возвращает, object

Object{
$$typeof:Symbol(react.element)
_owner:null
_self:null
_source:null
_store:Object
key:null
props:Object //тут инфа про содержимое svg
ref:null
type:"svg"
}

хочу его вставить примерно вот так
this.svg это другой svg

this.svg.append(task_parking())
				.attr('x', -9)
				.attr('y', -12)
				.attr('width', 20)
				.attr('height', 24)

нагуглил пример с похожим способом jsfiddle.net/XnG6r/477
но у меня в приложении этот код почему то не работает invalid callback: image/svg+xml
Может кто знает как это написать

Вопрос задан более трёх лет назад
918 просмотров

13 комментариев

Подписаться 1 Простой 13 комментариев

Решения вопроса 1

3 комментария

vaskadogana @vaskadogana Автор вопроса

theykillimmortal
Спасибо, почти. Хотел, примерно вот так https://jsfiddle.net/36nnzp0a/3/
а в идеале вот так https://jsfiddle.net/36nnzp0a/4/
Приложение на реакте и svg я храню в виде вот таких функций (так сложилось, местами разные пути, классы, цвета в зависимости от аргументов)).

function task_parking(nameOfClass) { return 	<svg  viewBox="0 0 22 22" width="22" className = {nameOfClass}>
                            <path fill="#FFF" className="back" d="M4 20.5c-1.4 0-2.5-1.1-2.5-2.5V4c0-1.4 1.1-2.5 2.5-2.5h14c1.4 0 2.5 1.1 2.5 2.5v14c0 1.4-1.1 2.5-2.5 2.5H4z" />
                            <path fill= '#739eff' className="border" d="M18 2c1.1 0 2 0.9 2 2v14c0 1.1-0.9 2-2 2H4c-1.1 0-2-0.9-2-2V4c0-1.1 0.9-2 2-2H18M18 1H4C2.3 1 1 2.3 1 4v14c0 1.7 1.3 3 3 3h14c1.7 0 3-1.3 3-3V4C21 2.3 19.7 1 18 1L18 1z"/>
                            <path fill= '#739eff' className="symbol" d="M12 7h-2H8v6 2h2v-2h2c1.1 0 3-1.1 3-3S13.1 7 12 7zM12 11h-2V9h2c0 0 1 0.2 1 1S12 11 12 11z" />
                          </svg>
}

Написано более трёх лет назад

theykillimmortal @theykillimmortal

Вы можете воспользоваться таким способом - https://jsfiddle.net/9ty8195d/
Он более лаконичный.)

Написано более трёх лет назад
vaskadogana @vaskadogana Автор вопроса

theykillimmortal спасибо!
Жаль, что как объект не выходит. Разбаловался с реактом.

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

1 комментарий

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

React

Простой
В чем заключается суть оптимизации скорости обновления компонентов через useReducer?
- 1 подписчик
- вчера
- 88 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- 23 апр.
- 97 просмотров
0

ответов
React

Простой
Почему Vite/Rollup не может зарезолвить абсолютные импорты?
- 1 подписчик
- 23 апр.
- 47 просмотров
1

ответ
React

Простой
Как решить проблему с манифестом в CRA-приложении?
- 1 подписчик
- 22 апр.
- 42 просмотра
0

ответов
React

+2 ещё

Средний
Какие есть WYSIWYG редакторы для мини-приложений ВК?
- 1 подписчик
- 22 апр.
- 48 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как получить актуальные данные в state при использовании server side event (в момент срабатывания события) в компоненте React?
- 1 подписчик
- 20 апр.
- 82 просмотра
1

ответ
React

Простой
Как получить значение из стейта если он еще не обновился?
- 1 подписчик
- 20 апр.
- 55 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Почему не берутся данные из Props при вызове функции ПО КЛИКУ?
- 1 подписчик
- 20 апр.
- 65 просмотров
0

ответов
React

+1 ещё

Простой
Как реализовать Микрофронтенд с использованием Vite с Typescript?
- 1 подписчик
- 19 апр.
- 55 просмотров
0

ответов
React

Простой
У меня react up ложу .env REACT_APP_PASSWORD=пароль Локально все ок Но на гите не видит..почему?
- 1 подписчик
- 19 апр.
- 71 просмотр
0

ответов
Показать ещё Загружается…

React разработчик

Uptrade

от 150 000 до 200 000 ₽

JS|React Native разработчик

Венста • Киров

от 60 000 до 120 000 ₽

Senior React Developer

DARS • Москва

от 200 000 до 300 000 ₽

Повысить оригинальность работы с 14% до 70%

25 апр. 2024, в 23:14

1600 руб./за проект

Доработать приложение - интегрировать виджет TODOs

25 апр. 2024, в 22:44

5000 руб./за проект

Доделать проект - расширение для Whatsapp (Chrome)

25 апр. 2024, в 22:33

15000 руб./за проект

ну так а где песочница с Вашим вариантом?
vaskadogana, но ответ Вы ждете? Вам лень создать, а кто-то должен? Интересная логика
Максим Тимофеев,
нет, не лень, просто не знаю как правильно создать.
вот вроде бы создал jsfiddle.net/XnG6r/485
правда ошибки валят, типа тег не закрыт, попробуй разгадай чего. Не уверен что реакт и d3 , правильно подключил
А еще тут либо знаешь как сделать, либо нет.
А что насчет моего варианта как я его выдерну из приложения? вот компонент https://jsfiddle.net/7en7ty9q/
строка 282
vaskadogana, ну так поисправляйте ошибки, там же просто синтаксис не верный
className = {nameOfClass}
Это что за ересь? Вероятно так:
className = "nameOfClass"
А вот строка не экранирована:
return <svg viewBox="0 0 22 22" width="22"
Где кавычки перед началом строки?
Максим Тимофеев,
className = {nameOfClass}
синтаксис реакта, это переменная

jsfiddle.net/XnG6r/488 вообще ругается на
<
vaskadogana,
синтаксис реакта, это переменная

ну так замените на значение, Вы же в jsfiddle работаете, как он Вам там ее заменит? Из чего?
вообще ругается на
<

потому что строка должна начинаться с кавычек, а у Вас она начинается с <. А в js < это знак "меньше", он и говорит Вам что его всунули явно не туда, если перед ним будет кавычка, то js поймет что это строка. Ну и в конце строки закройте кавычку.
Максим Тимофеев, хмм как бы это не строка, а тег.

включил бабел
jsfiddle.net/XnG6r/494
vaskadogana, в js нет такого типа данных "тег" - это плод вашего воображения.
Есть number, string, boolean, null, undefined и object
У Вас это строка (string).
https://learn.javascript.ru/types-intro
Максим Тимофеев пасиб, разобрался как в fiddle под реакт настраивать)
vaskadogana, поиск классная штука:
https://yandex.ru/search/?text=jsfiddle%20куфсе&cl...
Максим Тимофеев, ну там проблема был в Babel + JSX

Answer 1 · 2018-01-22 12:12:56

Здравствуйте!
Насколько я понимаю Вам хотелось реализовать что-то похожее на этот пример?
(https://jsfiddle.net/XnG6r/477) То есть подгружать svg?
Этот пример не работает потому что Вы используете d3 v4, а пример реализован на v3. В методе произошли изменения (docs: https://github.com/d3/d3-request/blob/master/READM...
Сделала Вам небольшой пример: https://jsfiddle.net/36nnzp0a/. Вам осталось только подгрузить нужную иконку.
Надеюсь я поняла Вас правильно.)

Answer 2 · 2017-12-22 18:19:00

пока что нашел только такое решение

внутри выводить svg на странице, потом использовать на него ссылку

render(ReactElement, DOMElement, callback){
		
		return (
			<div className='chart' style={{'width': '100%'}} >
				<div className='hidden_div'>{task_parking('park', 'park')}</div>
			</div>
		)
}

let parking = d3.select('.park');
			console.log(parking, this.svg) 
			this.svg.append('g').attr('class', 'events')
			.append('svg')
			.append('use')
			.attr("xlink:href", '#park')

Как вставить svg в svg?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт