Как получить svg в строковом формате элемента ag?

Question

Как получить svg в строковом формате элемента ag?

0

Я хотел бы знать, можно ли получить содержимое в элементе ag элемента svg с jquery или javascript?

<svg>
<g><path>...</path></g>
</svg>
<script>
    var contents = $("div").append($("svg g").clone()).html();
</script>

Это будет нормально работать с контуром или любой частью внутри элемента ag, но не с самим элементом g. Кроме того, по какой-то причине, если я запустил этот код:

<script>
    var contents = $("div").append($("path").parent().clone()).html();
</script>

Я могу получить содержимое, но для проекта мне нужно иметь возможность сопоставить элемент ag (в данном случае слой) и получить его содержимое.

Justin T. Watts 08 окт. 2013, в 23:42

Источник

0

Хотели внести исправления в понимание этой записи, они оба работают без ошибок, но первый получит гораздо больше, чем просто тег g, а второй просто получит тег g.
Justin T. Watts 09 окт. 2013, в 01:59

Теги:

javascript

jquery

svg

2 ответа

Ещё вопросы

Хотели внести исправления в понимание этой записи, они оба работают без ошибок, но первый получит гораздо больше, чем просто тег g, а второй просто получит тег g.

SpaceDog · Answer 1 · 2013-10-09T00-37-00.000Z

Кажется, что это работает, но есть несколько проблем с вашими примерами.

Сначала вы не можете использовать html() в элементе SVG (см. Ответ здесь: Почему.html() не работает с селекторами SVG с помощью jquery?), Поэтому это зависит от того, что вы хотите сделать с элементом g.

Во-вторых, вы добавляете элемент g в div, но он должен жить внутри элемента svg. Итак, для такой страницы:

<div>
    <svg>
        <g><path d='m10,10l10,0,0,-10,-10,0'></path></g>
    </svg>
</div>

Вы можете клонировать элемент g следующим образом:

g = $("svg g").clone();
$('svg').append(g);

// Move the cloned square
g.children().first().attr('d', 'm100,100l10,0,0,-10,-10,0');

Итак, теперь вы можете делать все, что хотите, с переменной g в этом примере (см. Связанный ответ, если вам нужно начать редактирование внутреннего XML напрямую, а не использовать jQuery для изменения содержимого).

Скрипт: http://jsfiddle.net/SpaceDog/sXbE3/

Чтобы получить строку, вам нужно использовать XMLSerializer как описано в связанном ответе выше:

var s = new XMLSerializer();
var str = s.serializeToString(g[0]);
console.log(str);

Здесь я использую g[0] чтобы получить элемент DOM из g. Если вы просто хотите, чтобы содержимое (g.children().first())[0]. Я обновил скрипку.

Однако, в зависимости от того, что вы собираетесь делать со строкой, вам может и не понадобиться. jQuery может изменять элементы напрямую - это зависит от того, что вы хотите сделать.

Я хотел бы получить содержимое (разметку) элемента svg g.
Способ сделать это в другом ответе, который я связал, я обновил скрипку и отредактировал свой ответ, чтобы показать пример.

novice · Answer 2 · 2013-10-09T00-26-00.000Z

Я не уверен, что это то, что вы имели в виду при получении содержимого элемента ag. Я попытался манипулировать им, используя простой скрипт.

    $("[name=getElement]").click(function(){
     $('.getThisElement').hide();
     $("#test"+$(this).val()).show('fast');

Попробуйте этот JSfiddle, который я создал.