0

I'm a total beginner in coding, so please excuse this simple question.

I have an HTML file with an SVG in it: 

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
<img src="example.svg" width="1000" height="700" >
</body>

</html>

I need the following: A Javascript function which translates the SVG by 100px along the y-axis. How does such a function concretely have to look like?

Remarks: It must be Javascript. The SVG could also be included by the object-tag (instead of img). I need jquery at some other point, that's why it is loaded.

Thank you very much in advance for any help!

EDIT: What I have done so far. The HTML is included as iframe in an other project. The goal is to show a "specific part" of the SVG when the JS is triggered. I tried the following code in the head of the HTML:

$(document).ready(function()
{
  window.parent.translation = function()
{ 
window.scrollTo(0, 100);
}
});

This would solve my problem and works everywhere perfectly fine - except for ipads. Whatever I did I could not scroll or jump to an anchor on ipads. That`s why I want to translate the SVG now (instead of scrolling the page). The effect should be the same.

So I tried to add an ID to the SVG as follows:

<img id="example_svg" src="example.svg" width="1000" height="700" >

And then I replaced the line with "scrollTo" by the following code:

document.getElementById('example_svg').style.setProperty("top", "100px");

But this doesn't work. So that's the point where I need help (alternatively scrollTo would be fine if it worked on ipads - but none of the workarounds I found in the internet worked).

Tall83
  • 343
  • 1
  • 4
  • 8
  • Sorry, the closing tag was just a typo. Yes, I wrote several JS functions (loops etc.) but haven't ever translated an SVG. I think I would find the image element by getElementbyId. The image element has to be located at x=0, y=0 at the beginning and then just translated by javascript. That's all. The JS will be triggered from outside (the whole HTML is included as an iframe in an other project). – Tall83 Feb 17 '17 at 00:42
  • OK, I added an bold "EDIT" in my posting above. There are more details and what I have tried so far. – Tall83 Feb 17 '17 at 01:07

1 Answers1

0

If you want to take the <img> out of the normal flow (ie shift it on the page relative to everything else), then you need to make it a "positioned" element. You do that using the position CSS property.

You could use position: relative, or position: absolute. You may need to choose one over the other depending on your situation. In the simple demo below, either would work.

var thing = document.getElementById("thing");

thing.style.top = "100px";
img {
  position: relative;
}
<img id="thing" src="http://lorempixel.com/g/400/200/" width="400" height="200" >
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Thank you very much! Now it works perfectly fine. I didn't know that I had to make it a positioned element. Thank you for the explanations! – Tall83 Feb 17 '17 at 11:54