Невозможно изменить имя класса элемента SVG

Я хочу изменить класс, применяемый на SVG, одним нажатием кнопки. Код here.Невозможно изменить имя класса элемента SVG

My SVG выглядит следующим образом:

<svg id="test" class="fill" xmlns="http://www.w3.org/2000/svg" width="100%" height="200px" > 
     <path id="path22276" d="m500 81c-41-6-110-35-110-46 0-6 32 6 48 19 8 5 53 12 101 14 78 4 93 1 144-22 32-14 60-26 64-26 8 0-37 34-62 47-28 15-131 22-185 14z"/> 
</svg>

Я попытался как код ниже:

document.getElementById("test").className = "halffill"; 
    document.querySelector("svg.fill").setAttribute("class","halffill");

я тестировал тот же код яваскрипта против нормального сНу тега. Он работал нормально. Есть ли какие-то ограничения на SVG? Пожалуйста, помогите мне понять это.

источник

2016-06-21 0aslam0

Если вы откроете консоль, вы увидите ошибку. Добавьте 'window.deFill = deFill;' под вашу функцию. Я думаю, что проблема связана с JSFiddle, поскольку ваш код работает в кодефене: http://codepen.io/anon/pen/wWoBaw – Pjetr

@Pjetr Я не понял, что вы имели в виду, добавив 'window.deFill = deFill;'. Я не могу понять, почему это не удалось в jsfiddle – 0aslam0

Я добавил несколько комментариев, может быть, теперь это яснее? Http: // jsfiddle.net/p19rnmev/2/ – Pjetr

Проблемы был Javascript типа нагрузки был установлен onload, который сделал вызов функции на нагрузке тела вместо onclick кнопки.

Решение: Вы можете увидеть значок шестеренки в правом верхнем углу раздела javascript. Нажмите на него, и не изменить тип нагрузки к Нет обертку -in< головы >

источник

2016-06-23 05:45:32

Какой значок шестерни? Этот вопрос не отмечен ничем, у которого есть значок шестеренки или раздел javascript. –

@ 0aslam0 предоставил ссылку на его [код] (http://jsfiddle.net/p19rnmev/). Там вы найдете значок шестеренки. Значок шестерни относится к настройкам. Также вы можете найти различные разделы (javascript, html, css). –

Дело в том, что javascript не обновляется в исходном коде. Вам нужно проверить изменение в режиме проверки. Первый из них не работал для меня, но второй работает.

document.querySelector("svg.fill").setAttribute("class","halffill");

Нажмите на кнопку, которая предназначена для изменения имени класса, а затем перейти в режим проверки и проверить имя класса SVG тега

Примечание: Для того, чтобы перейти в режим инспектировать щелкните правой кнопкой мыши в любом месте экрана и нажмите . Осмотрите или используйте ctrl + shift + I в Google Chrome в окнах.

источник

2016-06-21 11:39:07

Я проверил режим проверки в хроме. Но это не меняется для меня. – 0aslam0

Проблема заключалась в том, что тип загрузки javascript ** ** был установлен на ** onload **, что вызвало вызов функции при загрузке тела вместо нажатия кнопки. Решение. Вы можете увидеть значок шестеренки в правом верхнем углу раздела javascript. Нажмите на нее и измените ** тип загрузки ** на ** Нет wrap -in ** –

если вы добавите это как ответ, я могу принять его. – 0aslam0

Версия для печати setAttribute работает для меня. Для className, вам нужно baseVal в SVG:

document.getElementById("test").className.baseVal = "halffill";

источник

2016-06-21 13:38:31 zayjuc

className свойства на элементе SVG имеет другое определение от className свойства HTML-элемента.

В HTML, className есть строка. В SVG это объект SVGAnimatedString. Вот почему вы не можете просто делать svgElement.className = "halffill".

Однако вторая строка (с использованием setAttribute()) должна работать.

источник

2016-06-21 15:54:04

Или вы могли бы использовать ClassList свойство:.

document.getElementById ("тест") classList.add ("halffill");

источник

2017-09-15 16:33:35 gnou

Невозможно изменить имя класса элемента SVG

ответ

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