0

Let's say I have an SVG element

SVGArea

And after it I have an img div containing an Icon

IconImg

The structure is like :

  <div id="svgArea">
  <svg>
   #SOMETHING
  </svg>
  <div id="imgIcon">
    <img src={IconImg} >
    </img>
  </div>  
</div>

On click, the Icon image is placed somewhere in the SVG (according to computed w and y positions).

The problem : the Icon moves each time I scroll up or down or I zoom in/out. The element doesn't seem to stay fixed or sticky. And I have trid all what I have found in internet :

#IconImg{top:0; position:sticky // or fixed}
#SVGArea{position : relative}

And there is no parent with hidden-flow attribute.

How can I fix that I have my Icon stay in place what ever the scrool or zoom ? Thank you for you thoughts and answers for help.

Mourad Over Flow
  • 191
  • 1
  • 5
  • 16
  • why not just have the image in the SVG itself? – Robert Longson Oct 21 '22 at 15:09
  • Very good question ! Because in my SVGArea I have some complicated transformations applied on it and I don't want my Icon to have all this transformation I only need the Icon as it is. – Mourad Over Flow Oct 21 '22 at 15:12
  • By the way if you have a solution with the Icon as an SVG AND inside the SVGArea but without the overall transformation / style of the parent element it would be awesome ! I have choosed to put it in an as a workarround for this problem : )) – Mourad Over Flow Oct 21 '22 at 15:13
  • 4
    Well without seeing the transformation it's impossible to tell. Please create a proper [mcve] – Robert Longson Oct 21 '22 at 15:15
  • "h_ratio" and "top_diff" are some ratio values computed before. svg.style('perspective-origin', '50% 0%'); svg.style('transform-box', 'fill-box'); svg.style('transform', 'perspective(30em) rotateX(33deg)'); svg.style('transform', 'perspective(30em) rotateX(33deg) scale(' + h_ratio + ')'); svg.style('transform', 'perspective(30em) rotateX(33deg) scale(' + h_ratio + ') translate(0%, -' + top_diff + '%)'); – Mourad Over Flow Oct 21 '22 at 15:20
  • 4
    Please edit your question. [Try to create a runnable example using a Stack Snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) – Robert Longson Oct 21 '22 at 15:49
  • @RobertLongson Here is a concrete example in another stack over flow question https://stackoverflow.com/questions/74290784/how-to-inverse-perspective-transformation-on-svg?noredirect=1#comment131207293_74290784 – Mourad Over Flow Nov 04 '22 at 17:47

0 Answers0