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

Question

[vaskadogana]

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

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
Может кто знает как это написать

Comments

[Максим Тимофеев]

ну так а где песочница с Вашим вариантом?

[vaskadogana]

Максим Тимофеев, нигде

[Максим Тимофеев]

vaskadogana, но ответ Вы ждете? Вам лень создать, а кто-то должен? Интересная логика

[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"
Где кавычки перед началом строки?

[vaskadogana]

Максим Тимофеев,

className = {nameOfClass}

синтаксис реакта, это переменная

jsfiddle.net/XnG6r/488 вообще ругается на

<

[Максим Тимофеев]

vaskadogana,

синтаксис реакта, это переменная

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

вообще ругается на
<

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

[vaskadogana]

Максим Тимофеев, хмм как бы это не строка, а тег.

включил бабел
jsfiddle.net/XnG6r/494

[Максим Тимофеев]

vaskadogana, в js нет такого типа данных "тег" - это плод вашего воображения.
Есть number, string, boolean, null, undefined и object
У Вас это строка (string).
https://learn.javascript.ru/types-intro

[vaskadogana]

Максим Тимофеев пасиб, разобрался как в fiddle под реакт настраивать)

[vaskadogana]

Максим Тимофеев, jsfiddle.net/XnG6r/494

[Максим Тимофеев]

vaskadogana, поиск классная штука:
https://yandex.ru/search/?text=jsfiddle%20куфсе&cl...

[vaskadogana]

Максим Тимофеев, ну там проблема был в Babel + JSX

Answer 1

[theykillimmortal]

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

Comments

[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]

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

[vaskadogana]

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

Answer 2

[vaskadogana]

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

внутри выводить 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')

Comments

[vaskadogana]

хотелось бы всё таки найти решение без костыля