svgクリック時にページを遷移させたい(get)

Question

仕様とやりたいこと

asp.net C# でのWebアプリ
画面内の絵（画像）をhtml内にsvg属性で記入することで表現しています。
その絵をクリックすることでページを遷移させたい(getアクション)と考えています。

<svg class="クラス">
    <rect data-name="絵"
          id="rect815"
          width="100"
          height="100"
          x="34.773811"
          y="36.19643" />
    <text x="85" y="90" text-anchor="middle">テキスト</text>

  //svg内にアクションリンクを直接埋めてみたが画像が崩れただけ
  @Html.ActionLink("リンク", "index", "リンクcontrollerName")

</svg>

試したこと

svgの中にactionlinkを埋め込んでみましたがsvgの画像が崩れただけでした。

使えそうなもの

function alertName(e) {
  alert('Welcome to ' + e.target.getAttribute('data-name'));
}

window.onload = function() {
  paths = window.document.querySelectorAll('path');
  for (i = 0; i < paths.length; ++i) {
    paths[i].onclick = alertName;
  }
};

これ自体はロード時にhtml内の'path'属性の'data-name'を拾い上げてalert関数を仕込んでいるだけですが、これを利用してリンクを仕込めないか検討中です。

お力添えを宜しくお願いします。

Answer 1

デフォルトのルーティング設定だと URL が /{controller}/{action}/{id} らしいので、

window.location.href = '/controllerName/index/' + encodeURIComponent(e.target.getAttribute('data-name'));

こんな感じで遷移させてみたらどうでしょうか？

Comments

[sanezane]

ありがとうございます！
<svg>の中に直接onclickを入れたら遷移できました！