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也可以包含在object-tag（而不是img）中。我需要在其他方面使用jquery，这就是它被加载的原因。

非常感谢您的任何帮助！

编辑：到目前为止我做了什么。 HTML作为iframe包含在其他项目中。目标是在触发JS时显示SVG的“特定部分”。我在HTML的开头尝试了以下代码：

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

这可以解决我的问题并且无处不在 - 除了ipads。无论我做了什么，我无法滚动或跳到ipads上的锚点。这就是为什么我现在要翻译SVG（而不是滚动页面）。效果应该是一样的。

所以我尝试按如下方式向SVG添加ID：

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

然后我用以下代码用“scrollTo”替换了这一行：

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

但这不起作用。所以这就是我需要帮助的地方（或者如果它在ipads上工作就可以滚动 - 但我在互联网上找不到的解决方法都没有。）

Answer 1

如果你想将<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" >

如何通过Javascript翻译SVG

1 个答案: