Как clone() svg элемент?

311

08 сентября 2017, 21:43

Проблема в том, что нужно клонировать svg элемент и добавить его в другом месте. Использую jquery clone(), но вместо элемента я получаю в html [Object, Object]. Как можно решить эту проблему?

var icons = $("svg").clone(); 
$(".result").append("<div class='icon-wrapper'><div class='icon-container'>" + icons + "</div></div>")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<div class="result"></div> 
<svg version="1.1" class="drop-elem__plus" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve"> 
<path d="M26,0C11.664,0,0,11.663,0,26s11.664,26,26,26s26-11.663,26-26S40.336,0,26,0z M26,50C12.767,50,2,39.233,2,26 S12.767,2,26,2s24,10.767,24,24S39.233,50,26,50z"/> 
<path d="M38.5,25H27V14c0-0.553-0.448-1-1-1s-1,0.447-1,1v11H13.5c-0.552,0-1,0.447-1,1s0.448,1,1,1H25v12c0,0.553,0.448,1,1,1 s1-0.447,1-1V27h11.5c0.552,0,1-0.447,1-1S39.052,25,38.5,25z"/> 
</svg>

Answer 1

Вот эта часть + icons + преобразует Ваш объект icons в строку. И добавляется просто текст в div. Попробуйте так:

let icons = $("svg").clone(); 
let container = $("<div class='icon-container'/>").append(icons) 
let wrapper = $("<div class='icon-wrapper'/>").append(container) 
$(".result").append( wrapper )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="result"></div> 
<svg version="1.1" class="drop-elem__plus" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve"> 
                                                        <path d="M26,0C11.664,0,0,11.663,0,26s11.664,26,26,26s26-11.663,26-26S40.336,0,26,0z M26,50C12.767,50,2,39.233,2,26 
                                                            S12.767,2,26,2s24,10.767,24,24S39.233,50,26,50z"/> 
                                                        <path d="M38.5,25H27V14c0-0.553-0.448-1-1-1s-1,0.447-1,1v11H13.5c-0.552,0-1,0.447-1,1s0.448,1,1,1H25v12c0,0.553,0.448,1,1,1 
                                                            s1-0.447,1-1V27h11.5c0.552,0,1-0.447,1-1S39.052,25,38.5,25z"/> 
                                                    </svg>

Это работает, но можно красивее сделать. Но тогда Вам нужно разобраться как пользоваться шаблонизаторами

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не работает css-класс

Я пишу css-правило

363

CSS

Зуммирование, шрифты и Firefox

Текст небольшого размера, допустим 12px занимает на Opera/Chrome 80 пикселей в ширинуИ в пределах зума 50%-500% ширина меняется только в пределах сотых/тысячных

282

Java

Travis-Ci не получается запустить

Здравствуйте, помогите с Travis-Ci, не разу с ним не работалСобрал проект с помощью Maven, добавил в репрезиторий файл "

339

Java

Java import или пути?

Есть переменная (values) в class1 (package1), нужно ее импортировать в class2(package2)

238