Как изменить или добавить идентификатор в SVG?

#javascript #jquery #dom #raphael

#javascript #jquery #dom #рафаэль

Вопрос:

У меня есть SVG, созданный с помощью Raphael 2.0, который выглядит следующим образом :

 <div class="stave">
<svg height="342" version="1.1" width="512" xmlns="http://www.w3.org/2000/svg"
style="overflow: hidden; position: relative;" viewBox="0 410 1300 80"
preserveAspectRatio="meet">
........
</svg>
</div>

я просто хочу установить идентификатор в тег svg! Как я могу это сделать? JQUERY или RAPHAEL 2.0?
я вижу много ответов, но ни один из них не работает для меня.

Спасибо за помощь

Ответ №1:

 document.getElementsByTagName('svg')[0].id = 'svg_id';

Это должно сработать, если у вас на странице есть только один SVG-тег и если вы вызвали его после создания тега с помощью Raphael.

Если вы не создали тег с помощью Raphael, вы можете просто использовать что-то вроде этого:

 <svg id='svg_id'></svg>

Наряду с другими атрибутами, конечно.

Ответ №2:

 var paper=Raphael(0, 0, 342, 512)
paper.canvas.id='id_svg1'

1. Пожалуйста, объясните, что делает ваш код и почему это решит проблему. Ответ, который просто содержит код (даже если он рабочий), обычно не поможет OP понять их проблему.

2. при paper.canvas обращении к нужному элементу SVG <svg .. (не как к элементу DOM)

Ответ №3:

С помощью jQuery вы можете использовать селектор элементов и :nth-child().

Что-то вроде этого: (jsFiddle)

 <div class="frame">
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
</div>
<script type="text/javascript">
    $('div').css({'font-weight':'bold'});
    $('.frame div:nth-child(2)').attr("id","newId");
    $('#newId').css({'color':'#f30'})
</script>

Конечно, в вашем случае селектор будет $('svg')

1. Мне это нравится! Я предпочел этот, потому что я хочу использовать jquery для большинства вещей!

2. @trouble Я тоже люблю jQuery, но это грустный комментарий.

3. Потому что, как правило, мы используем vanilla JS, если можем.