Home>

There is a svg file that is uploaded to the site inside object.

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

For path elements (multiple elements) inside the svg, a hover animation is set, as well as a link to individual elements. There is a problem with the fact that the link is also opened inside the object, are there any options for how to move the opening of the link to the parent page, in theory, when clicked, a modal window should open at all.

<
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. There is no way to insert using the inline method.

add the entire svg code This looks pretty wild right now. The mask contains path and the same mask is applied to the same path. Inside tag, tag cannot be applied

Alexandr_TT2021-09-19 19:27:57
  • Answer # 1

    First, you need to make sure that the svg file is working, so we check it inline.

    • Styles for changing the color on hover are placed inside the svg file.
    • A link to an external resource is also placed inside.
    • Place the tooltip on hover inside the tags:< title > Questions tagged with [svg] < /title >
    &lt;
    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" &gt;
    &lt;
    style &gt;
      #Icon_info {
     fill: black;
      }
     #Icon_info: hover {
     fill: red;
     transition: 0.5s;
     }
     &lt;
    /style &gt;
    &lt;
    a href= "https://stackoverflow.com/questions/tagged/svg" &gt;
     &lt;
    g id= "icon_info" &gt;
     &lt;
    title &gt;
    Questions tagged with [svg] &lt;
    /title &gt;
    &lt;
    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" &gt ;
    &lt;
    /path &gt;
    &lt;
    path d= "M20 24h-8v-2h2v-6h-2v-2h6v8h2z" gt;
    &lt;
    /path &gt;
    &lt;
    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 "gt;
    &lt;
    /path &gt;
    &lt;
    rect width= "100%" height= "100%" fill= "transparent" /&gt;
    &lt;
    /g &gt;
    &lt;
    /a &gt;
    &lt;
    /svg &gt;
    

    The link is working, when you click, you go to the section with questions on SVG

    Next, upload this svg file to the server and call it with< object >

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

    Example with the appearance of a modal

    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;
    } 
    &lt;
    svg width= "400" height= "400" &gt;
      &lt;
    g id= "myicon" pointer-events= "all" &gt;
        &lt;
    circle cx= "100" cy= "150" r= "14" fill= "none" stroke= "gold" stroke-width= "2" /&gt;
        &lt;
    circle cx= "100" cy= "144" r= "2" fill= "gold" /&gt;
        &lt;
    rect x= "98.5" y= "148" width= "3" height= "10" fill= "gold" /&gt;
      &lt;
    /g &gt;
    &lt;
    /svg &gt;
    &lt;
    div id= "mypopup" &gt;
      &lt;
    h3 &gt;
    It's just a tooltip &lt;
    /h3 &gt;
      &lt;
    p &gt;
    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. &lt;
    /p &gt;
      &lt;
    p &gt;
    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. &lt;
    /p &gt;
    &lt;
    /div &gt;
     

    @Ainsberg If the answer was helpful don't forget to tick and upvote

    Alexandr_TT2021-09-20 07:21:15