@vaskadogana
Frontend developer

Как вставить 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
Может кто знает как это написать
  • Вопрос задан
  • 764 просмотра
Решения вопроса 1
theykillimmortal
@theykillimmortal
Здравствуйте!
Насколько я понимаю Вам хотелось реализовать что-то похожее на этот пример?
(https://jsfiddle.net/XnG6r/477) То есть подгружать svg?
Этот пример не работает потому что Вы используете d3 v4, а пример реализован на v3. В методе произошли изменения (docs: https://github.com/d3/d3-request/blob/master/READM...
Сделала Вам небольшой пример: https://jsfiddle.net/36nnzp0a/. Вам осталось только подгрузить нужную иконку.
Надеюсь я поняла Вас правильно.)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@vaskadogana Автор вопроса
Frontend developer
пока что нашел только такое решение

внутри выводить 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')
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы