3

Есть svg файл который загружается на сайт внутри object.

<div id="map">
<object
  type="image/svg+xml"
  data="/MapsemifinalmoddedV2.svg">
  <img src="/MapsemifinalmoddedV2.svg">
</object>
</div>

Для элементов path (несколько элементов) внутри svg задается анимация hover, а так же ссылка на отдельные элементы. Возникает проблема с тем что ссылка открывается так же внутри object, есть ли варианты как вынести открытие ссылки на родительскую страницу, по идее при нажатии вообще должно открываться модальное окно.

<a class="tn-atom" href="#popup:1" style="backface-visibility: hidden;">
<mask id="path-32-inside-13" fill="white">
<path d="..." fill="#27292A" stroke="url(#paint31_linear)" stroke-width="3" stroke-linejoin="round" mask="url(#path-32-inside-13)"/>
</a>

P.S. Вставить методом inline нет возможности.

1
  • 1
    добавьте полностью код svg Сейчас это выглядит довольно дико. В состав маски входит path и к этому же path применена эта же маска. Внутри тега <object> не может применяться тег <img> Commented 19 сент. 2021 в 19:27

1 ответ 1

4

Для начала нужно убедиться, что файл svg рабочий, поэтому проверяем его инлайн.

  • Стили для изменения окраски при наведении размещаем внутри svg файла.
  • Ссылку на внешний ресурс тоже размещаем внутри.
  • Вывод подсказки при наведении размещаем внутри тегов: <title>Вопросы с меткой [svg] </title>

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="10%" height="10%" viewBox="0 0 32 32">
<style>
  #icon_info  {
 fill:black;
  }
 
 #icon_info:hover {
 fill:red;
 transition: 0.5s;
 }
 </style>
<a href="https://ru.stackoverflow.com/questions/tagged/svg"> 
 
 <g id="icon_info"> 
 <title>Вопросы с меткой [svg] </title>
<path d="M14 9.5c0-0.825 0.675-1.5 1.5-1.5h1c0.825 0 1.5 0.675 1.5 1.5v1c0 0.825-0.675 1.5-1.5 1.5h-1c-0.825 0-1.5-0.675-1.5-1.5v-1z"></path>
<path d="M20 24h-8v-2h2v-6h-2v-2h6v8h2z"></path>
<path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13z"></path> 
<rect width="100%" height="100%" fill="transparent" />
</g>
</a>
</svg>

Ссылка рабочая, при клике происходит переход на раздел с вопросами по SVG

Далее загружаем этот файл svg на сервер и вызываем его с помощью <object>

<object type="image/svg+xml" style="width:64px;" data="https://svg-art.ru/files/Icon_info-link2.svg"> 
</object>

Пример с появлением модального окна

var myicon = document.getElementById("myicon");
var mypopup = document.getElementById("mypopup");

myicon.addEventListener("mouseover", showPopup);
myicon.addEventListener("mouseout", hidePopup);

function showPopup(evt) {
  var iconPos = myicon.getBoundingClientRect();
  mypopup.style.left = (iconPos.right + 20) + "px";
  mypopup.style.top = (window.scrollY + iconPos.top - 60) + "px";
  mypopup.style.display = "block";
}

function hidePopup(evt) {
  mypopup.style.display = "none";
}
body {
  background-color: #33333f;
}

#mypopup {
  width: 400px;
  padding: 20px;
  font-family: Arial, sans-serif;
  font-size: 10pt;
  background-color: white;
  border-radius: 25px;
  position: absolute;
  display: none;
}

#mypopup::before {
  content: "";
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
  background-color: white;
  position: absolute;
  left: -6px;
  top: 68px;
}
<svg width="400" height="400">
  <g id="myicon" pointer-events="all">
    <circle cx="100" cy="150" r="14" fill="none" stroke="gold" stroke-width="2"/>
    <circle cx="100" cy="144" r="2" fill="gold"/>
    <rect x="98.5" y="148" width="3" height="10" fill="gold"/>
  </g>
</svg>

<div id="mypopup">
  <h3>Это просто tooltip</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div> 

1
  • Не совсем то что нужно получилось, нужно вызывать все же ссылку внутри тега <a></a> на основной странице нажимая на элемент внутри svg. В данный момент ссылка открывается но получается что открывается окно внутри object. Задавая svg область методом inline скрипт на открытие отрабатывает правильно, но возможности загрузит svg методом inline нет возможности, и за размера кода.
    – Ainsberg
    Commented 20 сент. 2021 в 16:57

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.