リンクのためにSVGをクリック可能にする方法はありますか？

私はオブジェクトを使用して、他のページにhrefするSVGを埋め込みます。リンクのためにSVGをクリック可能にする方法はありますか？

最初のオプションはInkscapeのFAQ-S 1.8.1 http://wiki.inkscape.org/wiki/index.php/Frequently_asked_questions

を参照してください内のXMLを変更することです。しかし、私は、彼らが有効になってJSを持っている場合、動的URLを変更するためにはJavaScriptを使用します。とにかく、別のリンクを使って、同じSVGドキュメントを再利用したいのです。だから別のオプションが必要です。

番目のオプションは、「HREF」タグに埋め込まれたオブジェクトをラップし、それが動作するようには思えない、それがクリック可能なリンクではなく、SVGをSVGで覆われていないのdiv一部になります。

{オブジェクト内に.png（usemapを使用してクリック可能にしたもの）があるため、さらに複雑になります。ブラウザに戻った場合、クリック可能な領域が2つあります。 PNGとDIVの残り...}

第3オプション、svg自体のUSEMAP！いいえ、どちらもうまくいかないようです。

その他のオプションはありますか？参考のためにJavascriptの回答は歓迎ですが、理想的にはそうではありません。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!-- Created with Inkscape (http://www.inkscape.org/) --> 
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 617.875 320.75" width="100%" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> 
<metadata> 
<rdf:RDF> 
<cc:Work rdf:about=""> 
<dc:format>image/svg+xml</dc:format> 
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> 
<dc:title/> 
</cc:Work> 
</rdf:RDF> 
</metadata> 
<g transform="translate(-66.78125,-339.125)"> 
<rect style="stroke:#000000;stroke-miterlimit:4;stroke-dasharray:none;stroke-width:3.5999999;fill:#ff0000;" height="317" width="614" y="341" x="68.6"/> 
</g> 
</svg>

ノートSVGのXMLコードを追加する

<object class="svg" type="image/svg+xml" data="svgimage.svg" > 
    <img src="pngbackupforIEpre9androidpre3.png" type="image/png" usemap="#mapping"/> 
</object> 
</a> 
<map name="mapping"> 
<area shape="rect" coords="0,0,100,100" href="svgfreezone.php" /> 
</map>

EDITをHTMLコードを追加する

EDIT。 svgはdef'dされて平らに保存され、 "色Yを単純化する、スタイルをxml N、グループをYにする、IDを取り除くYを有効にする、ラスタを埋め込むN、エディタデータを保持する、ビューボックスYを有効にする、プロローグN、精度3、インデントなし "

最初のオプション：：; 使用（その「通常」のウェブサイトならば、これはあなたに適していないかもしれない、これはWebアプリケーションである場合、これが唯一の良いだろう）

出典

2012-04-14 Gamemorize

現在のコードへのリンクがありますか、質問に投稿することはできますか？埋め込むHTMLとSVGの両方。 – robertc

確かに私はhtmlを追加します...しかし、なぜあなたはsvgのXMLが必要ですか？ – Gamemorize

あなたはリンクがSVGにあると言いましたか？ SVGは独自のクリックイベントを処理しますので、SVGをクリックしている場合はそのコードが適切です。 – robertc

まあ、私は2つのオプションを参照してくださいSVG内に通常のhrefがあり、アンカーにリンクしています。それは＃何かのURLです。ちょうどハッシュ。認識できる「特別な」ハッシュを使用し、ウィンドウの「hashchange」イベントにフックして、ハッシュ== '#my_special_hash'かどうかを確認して、好きな場所にリダイレクトします。

第2のオプション： プレースホルダーhrefをSVGに挿入し、JavaScriptでSVGコンテンツを読み込みます。次に、hrefを本当に必要なURLに置き換えて、ページに挿入します。ほとんどのブラウザは、SVGをソースイメージとして、オブジェクトとしてサポートしています。実際のコードが必要な場合にRaphaelライブラリがSVGを構築する方法を確認できます。一部の古いブラウザではサポートが不足しているため、フォールバックにはVMLが使用されています。

幸運を祈る！ :-)

出典

2012-04-14 20:53:48

ウェブアプリケーションとウェブサイトの違いは？あなたはこの＃機能へのリンクを持っていますか？私はsvgにはかなり新しいので、本当にあなたの最初のオプションに従うことはできません。私はまた、javascriptとsvgのXMLにアクセスする可能性を再検討するつもりです....アイデアのおかげで！ – Gamemorize

私はそれが正式なものだとは思わない、おそらくそれを定義する私自身の個人的な方法だろう。しかし、私はWebアプリケーションをHTMLやグラフィックスではなく、クライアント側で実際のコードを使用するもの（Webベース）と考えています。そして、あなたのページはイベント駆動型であり、通常はネットワークにアクセスするためにJavaScriptを使用していることを意味します。私の定義によるFacebookはウェブアプリであり、Google+もそうです。だからStackoverflowは多くの部分にあります。 –

最初のオプションはSVGに関するものではありません。 SVGはHREFを置くことができるので、<... href = "＃special_link"> –

のcssプロパティをsvgイメージのアンカーに設定すると、クリック可能になります。

this pageに1つを使用しました。

#infoButton { 
    display: block; 
    float: left; 
    background-image: url('info.svg'); 
    background-repeat: no-repeat; 
    width: 70px; 
    height: 70px; 
}

出典

2013-07-03 17:31:04 Will

-1

一部のブラウザでは正常にSVGをサポートしていないSVGを使用しているときは常にdisplay: block;を置くようにしてください。

出典

2016-07-11 09:37:43

リンクのためにSVGをクリック可能にする方法はありますか？

答えて

関連する問題