2017-02-17 4 views
-1

私はコーディングの初心者ですので、この簡単な質問をお許しください。SVG by Javascriptの翻訳方法

<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> 

私は次が必要です:y軸に沿って100pxにでSVGを変換するJavascriptの機能

は、私はそれでSVGとHTMLファイルを持っています。そのような機能は具体的にどのように見えるのですか?

備考:Javascriptである必要があります。 SVGは(imgではなく)オブジェクトタグによっても含めることができます。私は別の場所でjqueryが必要なので、ロードされているのです。

ご協力いただきありがとうございます。

EDIT:私がこれまで行ってきたこと。 HTMLは他のプロジェクトのiframeとして含まれています。目標は、JSがトリガされたときにSVGの「特定の部分」を表示することです。

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

これは私の問題を解決するだろうし、どこでも完全に正常に動作します - iPadを除い:私は、HTMLの先頭に次のコードを試してみました。私が何をしたとしても、スクロールしたり、ipadsのアンカーにジャンプすることはできませんでした。それで私はSVGを(ページをスクロールせずに)今翻訳したいのです。効果は同じでなければなりません。

だから私は、次のようにSVGにIDを追加しようとしました:

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

そして私は、次のコードで "scrollTo" で行を置き換える:

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

しかし、これは」doesnの仕事。それは私が助けを必要とするところです(あるいは、ipadsで動作していればscrollToもうまくいきますが、インターネットで見つかった回避策はありません)。

+0

申し訳ありませんが、終了タグがちょうどタイプミスでした。はい、いくつかのJS関数(ループなど)を書きましたが、SVGを翻訳したことはありません。私はgetElementbyIdによってイメージ要素を見つけるだろうと思う。イメージ要素は最初にx = 0、y = 0に配置し、次にjavascriptで変換する必要があります。それで全部です。 JSは外部からトリガーされます(HTML全体が他のプロジェクトのiframeとして含まれています)。 – Tall83

+0

OK、上記の投稿に太字の「EDIT」を追加しました。もっと詳細な情報があり、これまでに私が試したことがあります。 – Tall83

答えて

0

<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" >

+0

ありがとうございました!今それは完璧に正常に動作します。私はそれを位置付けられた要素にしなければならないことを知らなかった。説明をありがとう! – Tall83

関連する問題