如何通过 Javascript 翻译 SVG

Question

我是编码的初学者，所以请原谅这个简单的问题。

我有一个包含 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）。我在其他时候需要 jquery，这就是加载它的原因。

非常感谢您的帮助！

编辑： 到目前为止我做了什么。 HTML 作为 iframe 包含在另一个项目中。目标是在触发 JS 时显示 SVG 的 "specific part"。我在 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 上工作会很好 - 但 none 我在互联网上找到的解决方法有效）。

Answer 1

如果您想将 <img> 从正常流程中移出（即相对于其他所有内容在页面上移动它），则需要将其设为 "positioned" 元素。您可以使用 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" >

如何通过 Javascript 翻译 SVG

How to translate SVG by Javascript

html

javascript

svg

translation