2017-02-17 48 views
-1

Я новичок в кодировании, поэтому, пожалуйста, извините этот простой вопрос.Как перевести SVG по Javascript

У меня есть файл HTML с SVG в нем:

<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 по 100px вдоль оси у. Как должна выглядеть такая функция?

Замечания: Должно быть Javascript. SVG также может быть включен тегом object (вместо img). Мне нужен jquery в другом месте, поэтому он загружен.

Благодарим вас за любую помощь!

EDIT: Что я сделал до сих пор. HTML включен как iframe в другом проекте. Цель состоит в том, чтобы показать «конкретную часть» SVG при запуске JS. Я попытался следующий код в голове HTML:

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

Это позволит решить мою проблему и работает везде прекрасно - за исключением IPADS. Что бы я ни делал, я не мог прокручивать или прыгать на якорь на ipads. Вот почему я хочу перевести SVG сейчас (вместо прокрутки страницы). Эффект должен быть одинаковым.

Так что я пытался добавить идентификатор в SVG следующим образом:

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

А потом я заменил строку с «scrollTo» следующим кодом:

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

Но это Безразлично» т работы. Так вот, где мне нужна помощь (иначе scrollTo будет хорошо, если она будет работать на ipads - но ни один из обходных решений, которые я нашел в Интернете, не работал).

+0

К сожалению, закрытие тег просто опечатка. Да, я написал несколько функций JS (петли и т. Д.), Но никогда не переводил SVG. Я думаю, что найду элемент изображения getElementbyId. Элемент изображения должен быть расположен в x = 0, y = 0 в начале, а затем просто переведен на javascript. Это все. JS будет запущен извне (весь HTML включен как iframe в другом проекте). – Tall83

+0

Хорошо, я добавил смелый «EDIT» в своем сообщении выше. Есть более подробные сведения и то, что я пробовал до сих пор. – Tall83

ответ

0

Если вы хотите вывести <img> из нормального потока (т. Е. Сдвинуть его на страницу относительно всего остального), вам нужно сделать его «позиционированным» элементом. Вы делаете это с использованием свойства CSS position.

Вы можете использовать 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" >

+0

Спасибо вам большое! Теперь он отлично работает. Я не знал, что должен был сделать его позиционируемым. Спасибо за объяснения! – Tall83