web-dev-qa-db-ja.com

svg画像オブジェクトをonclickでクリック可能にし、絶対配置を回避します

サイトの画像をimgからsvgに変更し、imgタグをembedおよびobjectタグに変更しようとしました。ただし、以前にonclickタグに含まれていたimg関数を実装することは、最も困難です。

onclickまたはobjectタグ内にembedを配置しても効果がないことがわかりました。

そこで、svg専用にdivを作成し、このonclickタグにdivを配置しました。ただし、訪問者が画像の端やパディングをクリックしない限り、効果はありません。

divのオーバーレイについて読みましたが、absoluteポジショニングの使用、またはpositionの指定をまったく避けようとしています。

Onclickをsvgに適用する別の方法はありますか？

誰もこの問題に遭遇しましたか？質問や提案を歓迎します。

htmlcsssvg
50
user256410

あなたはsvg自体にonclickイベントを持つことができます、私は私の仕事でこれを常にします。 svgのスペース上に四角形を作成します（したがって、最後に定義し、svgがpaintersモデルを使用することを忘れないでください）

rect.btn {
  stroke:#fff;
  fill:#fff;
  fill-opacity:0;
  stroke-opacity:0;
}

次に、rectの属性としてonclickを追加します（これは、jsまたはjqueryでも実行できます）。

<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g>
    <circle ... //your img svg
    <rect class="btn" x="0" y="0" width="10" height="10" onclick="alert('click!')" />
  </g>
</svg>
</div>

これはほとんどの最新のブラウザで動作します http://caniuse.com/svg ...ただし、相互互換性が必要な場合は、Google Chrome Frame。 http://www.google.com/chromeframe

58
RGB

これは、RGBのソリューションに対するコメントとして始まりましたが、私はそれに適合できなかったので、答えに変換しました。そのインスピレーションは完全にRGBのものです。

RGBのソリューションがうまくいきました。ただし、私がこの投稿にたどり着くのを助けるかもしれないいくつかのポイント（私のように）に注意したいです。

したがって、私が使用したRGBのソリューションを適用するには：

CSS

 <style>
    rect.btn {
        stroke:#fff;
        fill:#fff;
        fill-opacity:0;
        stroke-opacity:0;
    }
</style>

Jqueryスクリプト

<script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>   
<script type="text/javascript">
   $("document").ready(function(){
       $(".btn").bind("click", function(event){alert("clicked svg")});
   });
</script>

SVGコード内のグループタグに既存のSVGファイルを含めるようにコーディングするHTML。

<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g>
     <image x="0" y="0" width="10" height="10"
     xlink:href="../_public/_icons/booked.svg" width="10px"/>
    <rect class="btn" x="0" y="0" width="10" height="10"/>

  </g>
</svg>
</div>

しかし、私の場合、クリックできるようにしたいSVGアイコンがいくつかあり、これらをそれぞれSVGタグに組み込むのは面倒になり始めました。

そこで、クラスを使用できる代替アプローチとして、jquery.svgを使用しました。これはおそらく、このプラグインの恥ずべきアプリケーションであり、SVGを使用してあらゆる種類の処理を実行できます。しかし、次のコードを使用して機能しました：

<script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>       
<script type="text/javascript" src="jquery.svg.min.js"></script>
<script type="text/javascript">
    $("document").ready(function(){
        $(".svgload").bind("click", function(event){alert("clicked svg")});

         for (var i=0; i < 99; i++) {
           $(".svgload:eq(" + i + ")").svg({
              onLoad: function(){
              var svg = $(".svgload:eq(" + i + ")").svg('get');
              svg.load("../_public/_icons/booked.svg", {addTo: true,  changeSize: false});        
              },
              settings: {}}
          ); 
        } 
    });
</script>

hTML

<div class="svgload" style="width: 10px; height: 10px;"></div>

私の考えの利点は、アイコンが必要な場所で適切なクラスを使用でき、読みやすくするためにHTMLの本文にある大量のコードを回避できることです。そして、既存のSVGファイルを組み込む必要があるのは一度だけです。

編集：以下は、Keith Woodの好意によるスクリプトのすてきなバージョンです。svgのロードURL設定を使用しています。

<script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>       
<script type="text/javascript" src="jquery.svg.min.js"></script>
<script type="text/javascript">
    $("document").ready(function(){

      $('.svgload').on('click', function() {
          alert('clicked svg new');
      }).svg({loadURL: '../_public/_icons/booked.svg'});

    });
</script>
6
codepuppy

Firefox、Chrome、Safari、Operaの最新バージョンでこれが機能するようになりました。

絶対位置を持つオブジェクトの前の透明なdivに依存し、幅と高さを設定して、下のオブジェクトタグをカバーします。

ここに、私は少し怠け者で、インラインスタイルを使用しています。

<div id="toolbar" style="width: 600px; height: 100px; position: absolute; z-index: 1;"></div>
<object data="interface.svg" width="600" height="100" type="image/svg+xml">
</object>

次のJavaScriptを使用して、イベントをフックしました。

<script type="text/javascript">
    var toolbar = document.getElementById("toolbar");
    toolbar.onclick = function (e) {
        alert("Hello");
    };
</script>
4
Richard Garside

<embed/>タグを<img/>に置き換え、type属性を削除するだけで機能しました。

たとえば、私のコードでは、次の代わりに：

<embed src=\"./images/info_09c.svg\" type=\"image/svg+xml\" width=\"45\" onClick='afiseaza_indicatie($i, \"$indicatii[$i]\")'>

クリックに答えない、私は書いた：

<img src=\"./images/info_09c.svg\" height=\"25\" width=\"25\" onClick='afiseaza_indicatie($i, \"$indicatii[$i]\")'>

Internet ExplorerとGoogle Chromeで動作し、他のブラウザでも動作することを期待しています。

3
Mihai Daniel Frumușelu

インラインsvgを使用する場合は問題ありません。

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
  <circle id="circle1" r="30" cx="34" cy="34" onclick="circle1.style.fill='yellow';"
            style="fill: red; stroke: blue; stroke-width: 2"/>
  </svg>
1
peter

_<object>_を使用して同じ起源のSVGを埋め込む場合、_objectElement.contentDocument.rootElement_を使用して内部コンテンツにアクセスできます。そこから、イベントハンドラーを簡単にアタッチできます（例：onclick、addEventListener()など）

例えば：

_var object = /* get DOM node for <object> */;
var svg = object.contentDocument.rootElement;
svg.addEventListener('click', function() {
  console.log('hooray!');
});
_

_<object>_ Originサーバーも制御し、CORSを設定できない限り、これはクロスオリジン_<object>_要素では不可能であることに注意してくださいヘッダーがあります。 CORSヘッダーのないクロスオリジンケースの場合、contentDocumentへのアクセスはブロックされます。

1
candu

次のコードを使用できます。

<style>
    .svgwrapper {
        position: relative;
    }
    .svgwrapper {
        position: absolute;
        z-index: -1;
    }
</style>

<div class="svgwrapper" onClick="function();">
    <object src="blah" />
</div>

b3ng0も同様のコードを作成しましたが、機能しません。親のz-indexは自動でなければなりません。

1
Oleg Torbasow

おそらくあなたが探しているのはSVG要素のpointer-eventsプロパティであり、これは SVG w3Cワーキンググループドキュメントで読むことができます 。

CSSを使用して、SVG要素がクリックされたときの動作などを設定できます。

0
Danny Bullis

クリックイベントで<g>のSVGの<object>要素をクリックします。 100％動作します。 <svg>のネストされたjavascriptを見てください。親ページをリダイレクトする場合は、window.parent.location.href=を挿入することを忘れないでください。

https://www.tutorialspoint.com/svg/svg_interactivity.htm

0
Imeksbank

CSS z-indexプロパティを使用して、コンテナdevをsvgの「上」に配置することを検討しましたか？ divは（おそらく）透明なので、画像は以前とまったく同じように表示されます。

これは、あなたの問題を解決するためのベストプラクティスであり、非ハック的な方法だと思います。 z-indexは、positionプロパティがfixed、relative、または聞いたようにabsoluteの要素に対してのみ有用です。ただし、実際にオブジェクトを移動する必要はありません。

例えば：

<style>
    .svgwrapper {
        position: relative;
        z-index: 1;
    }
</style>
<div class="svgwrapper" onClick="function();">
    <object src="blah" />
</div>

また、onClickをまったく使用せず、javascriptを使用してクリックイベントをバインドするほうが、よりエレガントで安全です。ただし、これはまったく別の問題です。

0
b3ng0

クロスブラウザサポート（IEのプラグインなしでは不可能）を必要としないと仮定して、 svg as a background image ？

確かに実験的なものですが、私はそれを言及すると思いました。

0
Russell Leggett