Нажмите на ссылку svg, чтобы выбрать html.

У меня есть относительно сложный svg, изображающий ячейку, встроенную в мою html-страницу через тег. Если вы наведите курсор на определенные пути svg (например, ядра), мне уже удалось заставить их изменить цвет, и я добавил всплывающую подсказку, которая показывает небольшое окно с небольшим количеством текста. Все идет нормально.Нажмите на ссылку svg, чтобы выбрать html.

У меня также есть куча простых html-флажков, которые связаны с svg (т. Е. Они помечены как «ядро» и т. Д.). Все нажатие этих флажков на это, чтобы установить их значение 1.

Теперь, что я действительно хочу добиться того, чтобы быть в состоянии нажать на пути SVG (например, ядро), которые затем

изменения цвет пути - это мне удалось сделать с помощью простой функции:
```
function buttonClick(evt){ 
    document.getElementById("nucleus").style["fill"] = "yellow"; 
} 
```
, а затем
```
onmouseup="buttonClick(evt)" 
```
в соответствующем пути.
выбирает соответствующий флажок. (Мой руководитель любит быть в безопасности и все о совместимости с браузером, поэтому он хочет, чтобы простые флажки были резервными, поэтому, к сожалению, я не могу просто спрятать их за SVG или что-то в этом роде ...)
на второй щелчок, все должно быть отменено/невыбранные

Теперь это возможно?

Все, что я смог найти: - как заменить флажок целого изображения (не то, что мне нужно, только путь SVG) ИЛИ - как сделать флажки стиля в SVG/CSS. (Ницца, но также не то, что мне нужно) ИЛИ - как выбрать флажок в jquery. Я пробовал это

$('.comp_nuc')[0].checked = true;

но он, кажется, ничего не делает.

источник

2016-08-12 DaReHo

Дайте этому попытку:

<!DOCTYPE HTML> 
 
<html> 
 
<head></head> 
 
<body> 
 
myCheckbox:<input onClick=myCheckChecked() id=myCheckbox type="checkbox" /> 
 
<svg width=400 height=400> 
 
<circle id="myCircle" onClick=circleClicked() cx=200 cy=200 fill=red r=100 /> 
 
</svg> 
 
<script> 
 
function circleClicked() 
 
{ 
 
    if(myCircle.getAttribute("fill")=="red") 
 
    { 
 
     myCircle.setAttribute("fill","yellow") 
 
     myCheckbox.checked=true 
 
    } 
 
    else 
 
    { 
 
     myCircle.setAttribute("fill","red") 
 
     myCheckbox.checked=false 
 
    } 
 

 
} 
 
function myCheckChecked() 
 
{ 
 
    if(myCheckbox.checked==true) 
 
     myCircle.setAttribute("fill","yellow") 
 
    else 
 
     myCircle.setAttribute("fill","red") 
 
} 
 
</script> 
 
</body> 
 
</html>

источник

2016-08-12 13:27:21

Спасибо, ребята, это хорошо работает, если у меня есть код, написанный в SVG моем HTML-файл. Я бы хотел, чтобы все это было встроено (это дополнительные 900 строк кода, которые мне действительно не нужны в моем html-файле ...) Возможно ли это как-то? Я не смог это сделать. Изменение цвета прекрасное, но флажок не работает, когда svg не записывается в html-файл. – DaReHo

@DaReHo Вы вызываете файл svg на HTML-страницу через XMLHttpRequest? –

@Francis нет, у меня просто был тег объекта. Я думаю, что эта информация затерялась в редактировании. Теперь я только что скопировал весь код svg, где использовался тег объекта, и он работает. Я бы предпочел тег объекта, хотя, как я читал на кучу форумов, он предлагает большую гибкость. И просто делает весь скрипт немного чище. Теперь я посмотрю на xmlhttprequest, спасибо! – DaReHo

Нажмите на ссылку svg, чтобы выбрать html.

ответ

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