#javascript #html #css #svg #modalpopup
#javascript #HTML #css #svg #modalpopup
Вопрос:
Вот моя ситуация с новичком, и я рассмотрел решения здесь, но пока безуспешно. Я создал SVG с выделенными разделами при наведении курсора мыши и хотел бы, чтобы эти разделы открывались в модальном всплывающем окне. Я использую модальный код шаблона веб-сайта, и все это корректно работает только для любого одного элемента в SVG. Это означает, что я не могу использовать его более одного раза, потому что он отключает все наведения курсора мыши и связывание других элементов и / или их всплывающих окон, но только в отношении SVG.
Теперь причина этого заключается в разделах кода div. Если я удалю их, все остальные разделы в SVG снова будут работать.
Итак, могу ли я в любом случае заменить теги div другим контейнером, поскольку кажется, что они плохо работают с SVG.
SVG выполняется здесь: https://crunchyfrogpro.com/test/adfinancial/index.php/our-company/professional-opportunities/professional-firm-alliance
Код:
<a class="sppb-modal-selector sppb-magnific-popup" data-popup_type="inline" data-mainclass="mfp-no-margins mfp-with-zoom" href="#sppb-modal-101" id="sppb-modal-101-selector">
<path
style="opacity:0;fill:#d45242;fill-opacity:0.295547;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 121.14963,25.314849 4.33969,-1.808204 6.50953,-2.531485 6.1479,-1.084922 h 6.50953 L 239.31,20.38 144.65,181.88 83.86,78.66 l 18.48432,-33.454913 2.89312,2.169844 3.61641,2.169844 3.97805,1.446563 4.33968,1.084922 L 121.13,52.36 Z"
id="path2996"
onmouseover="this.style.opacity=1"
onmouseout="this.style.opacity=0" />
<div id="sppb-addon-101" class="clearfix "><div id="sppb-modal-101" class="mfp-hide white-popup-block modal-text"><div class="modal-inner-block"><p><strong>TITLE</strong></p><p>MODAL TEXT HERE</p>
</div></div></div></a>
Комментарии:
1. Добро пожаловать в StackOverflow! Чтобы помочь вам, вы также должны поделиться своим соответствующим Javascript … предполагая, что в нем есть нечто большее, чем onmouseover и onmouseout.
2. <div> должен быть внутри тега <foreignObject>. Или, в качестве альтернативы, полностью отказаться от идеи <div> и использовать элементы SVG <text> и <tspan>.