Как присвоить идентификатор SVG-коду?

-2

У меня есть SVG-код для карты. Этот код является частью картыКак присвоить идентификатор SVG-коду?

<circle opacity="0.33" fill="#913A3A" stroke="#CDC9C4" stroke-miterlimit="10" cx="273.5" cy="231.9" r="18.6"/>

Я хочу изменить цвет своей заливки при нажатии кнопки. Я добавил код кнопки.

Мне известен код JavaScript. Однако, когда я назначаю идентификатор этого кода и проверяю его следующим образом

<Pathid = "path1" circle opacity="0.33" fill="#913A3A" stroke="#CDC9C4" stroke-miterlimit="10" cx="273.5" cy="231.9" r="18.6"/>

Круг исчезает с карты. Как я могу с этим справиться?

Это JavaScript, который я использовал

$('#btn-test1').on("click", function() { 
    $('#path1').css({ fill: "#ff0000" }); 
});

источник

2016-10-14 Noor AlQaedi

<круг непрозрачности = "0,33" заполнить = "# 913A3A" ход = "# CDC9C4" штрих-miterlimit = "10" сх = "273,5" су = "231,9" г = «18.6» /> –

Я не понимаю, что вы имеете в виду, назначив идентификатор и протестируйте его, когда вы предоставляете совершенно другую разметку, следуя этому, что эта разметка связана с вашим вопросом? –

Вы пробовали: '<круг id =" test1 "opacity =" 0.33 "fill =" # 913A3A "stroke =" # CDC9C4 "stroke-miterlimit =" 10 "cx =" 273.5 "cy =" 231.9 "r =" 18,6 "/>'? – Nate

Насколько я знаю, это просто невозможно дать SVG элемент идентификатор. Я бы, вероятно, использовал элемент canvas для этого в любом случае. Скажите, пожалуйста, если я дезинформирован.

источник

2016-10-14 16:26:04

. Я не понял, что вы говорите. Затем, как изменить цвет круга на кнопку с помощью SVG-кода? –

Не могли бы вы включить весь код, чтобы я мог видеть результаты его запуска? Благодарю. –

Это код круга, он является частью огромной карты. –

В вашем примере,

вы заменили <circle> элемент с <pathid> пользовательского элемента. Вы, вероятно, имел в виду <circle Pathid = "path1".../>
но пространства вокруг этого = собираются быть проблемой, так <circle Pathid="path1".../>
но вы пытаетесь дать <circle> в id, а не какой-то пользовательский Pathid атрибут, так

<circle id="path1".../>

при изменении только один класс CSS с JQuery, вы можете быть немного менее многословным с синтаксисом .css("property","value") - в данном случае, это

$('#path1').css("fill","#ff0000");

Вот это все вместе взятые. Не беспокойтесь о моем <svg>'s viewbox или его ширине - это всего лишь базовый размер для демонстрации и не будет иметь значение, если круг находится в вашем <svg>.

$('#btn-test1').on("click", function() { 
 
    $('#path1').css("fill", "#ff0000"); 
 
});

svg { 
 
    width: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<svg id="btn-test1" viewbox="0 0 40 40"> 
 
    <circle id="path1" opacity="0.33" fill="#913A3A" stroke="#CDC9C4" stroke-miterlimit="10" cx="20" cy="20" r="18.6" /> 
 
</svg>

источник

2016-10-15 18:12:38 henry

Как присвоить идентификатор SVG-коду?

ответ

Смежные вопросы