我是编码的总体初学者，所以请原谅这个简单的问题。
我有一个带有SVG的HTML文件：
<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>
我需要以下内容：一个JavaScript函数，将SVG沿Y轴翻译为100px。这样的功能必须看起来像？
备注：必须是JavaScript。SVG也可以由对象标签（而不是IMG）包含。我需要在其他某个时候，这就是为什么它被加载的原因。
非常感谢您的任何帮助！
编辑：到目前为止我所做的。HTML在另一个项目中作为iframe包括在内。目的是在触发JS时显示SVG的"特定部分"。我在HTML的头部尝试了以下代码：
$(document).ready(function()
{
window.parent.translation = function()
{
window.scrollTo(0, 100);
}
});
这将解决我的问题，并且在任何地方都可以正常工作 - 除了iPad。无论我做什么，我都无法滚动或跳到iPad上的锚点。这就是为什么我现在想翻译SVG（而不是滚动页面）。效果应该相同。
因此，我尝试在以下方式向SVG添加ID：
<img id="example_svg" src="example.svg" width="1000" height="700" >
，然后我用以下代码替换了" scrollto"：
document.getElementById('example_svg').style.setProperty("top", "100px");
但这不起作用。因此，这就是我需要帮助的一点（或者，如果Scrollto在iPad上有效，那么我在Internet中发现的解决方案都没有）。
如果要将<img>从正常流中取出（即相对于其他所有内容，在页面上移动它），则需要使其成为"定位"元素。您可以使用position CSS属性做到这一点。
您可以使用position: relative或position: absolute。根据您的情况，您可能需要选择一个。在下面的简单演示中，要么可以工作。
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" >