0

I've asked this prior (thank you very very much for your solution Robert Longson. I've been expending hours trying to figure it out):

Use transform with scale and translate together on a svg path

Now I'm dealing with another related problem: using plain HTML and CSS I can't set the layers of the paths. Therefore hover with the transform scale doesn't overlap all the surrounded paths. I've read several solutions like these that I'm going to write down:

Plain HTML and CSS:
  1. Using z-index: SVG doesn't recognize since it uses the painter model.
  2. Manually sort the occurrence of the path: it would work if it was a static arrangement path (without the hover).
  3. Using "use" tag: I like this option. I tried to assign a function that assigns the hovered path id to the use tag but it doesn't work (I left the code below).
  4. Another option using the DOM?
    Edit-1: I've found one answer in this thread that uses pure JS. It works well unless you have a transform on your path.
    • SVG animate layers z-index
      Edit-2: Today I figured out a not quite elegant solution but it works. I looked for the transformed paths (that AI gives me as a code). Then I opened the original AI SVG file and isolated them from the rest. Next, I moved until I reach the desired position on the code that AI gives me for that path. Finally, apply a little translate() on the path.
var svg = document.querySelector('svg');
var areas = document.querySelectorAll('.svg_area');
var i = areas.length;
while(i--) {
  areas[i].addEventListener('mouseenter', function(e) {
    svg.appendChild(e.target);
  });
}
Using a library:
  1. Using d3 like someone mentions in this post
  1. Use jquery hover "$('pathName').hover( function(){...}" I found these examples:

A simple example trying to solve it using the "use" tag:

<!DOCTYPE html>
<HTML>
<head>     
    <style type="text/css">
        #svg1 {
            width: 400px;
            background-color: brown;
        }

        
        #svg1 path:hover {
            transition-duration: 2s;
            transform-origin: center;
            transform-box: fill-box;
            transform: scale(2);
        }

        #usetag:hover {
            transition-duration: 2s;
            transform-origin: center;
            transform-box: fill-box;
            transform: scale(2);
        }    


    </style>
</head>
  
<body style='background: darkblue;'> 
    
    
    <svg  id="svg1" x="0px" y="0px" viewBox="0 0 800 800">    
    <path
    id="box1"   onmouseover='stack()' d="M350 350 L400 350 L400 450 L350 450 L350 350 Z">
    </path>

    <path id='box2' d='M400 450 L450 450 L450 500 L400 500 L400 450Z ' fill='green' />


    <use id='usetag' href=""/>

</svg>



<script>

   function stack() {
       document.getElementById('usetag') = 'href:#box1';
  }
</script>


</body>   
</HTML>

When I hover on the black path the green one is over it: When I hover on the black path the green one is over it.

Jony
  • 11
  • 2

0 Answers0