svgにhrefを追加することは可能ですか？

Question

SVGを使うとき、hrefの追加方法が知りたいです。
検索したところ、Xlinkを使用するように記載してありましたが、機能しませんでした。

<div class="btn">
     Read more
     <svg width="130" height="65" viewBox="0 0 130 65" xmlns="http://www.w3.org/2000/svg">
     <rect x='0' y='0' fill='none' width='130' height='65'/>
     </svg>
</div>

.btn {
  width: 130px;
  height: 65px;
  margin: 15px auto;
  color: black;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.15rem;
  line-height: 65px;
  text-align: center;
  position: relative;
  cursor: pointer;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
}
svg rect, svg path, svg polyline {
  fill: none;
  stroke: black;
  stroke-width: 1;
}

.btn:hover svg rect {
  stroke: black;
}

svg rect {
  stroke-dasharray: 400, 0;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
}

.btn:hover svg rect {
  stroke-width: 3;
  stroke-dasharray: 35, 245;
  stroke-dashoffset: 38;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
}

Comments

[m.ts10806]

目的とゴールを明示された方が回答者が無用なエスパーすることなくアドバイスできるので、解決もしやすくなると思います。
要件不明瞭なのはよろしくありません

Answer 1

下記のようにSVGにxlinkを設定すればリンクは機能します。

<div class="btn">
  Read more
  <svg width="130" height="65" viewBox="0 0 130 65" xmlns="http://www.w3.org/2000/svg">
    <a xlink:href="https://teratail.com" target="blank">
      <rect x='0' y='0' fill='none' width='130' height='65' />
    </a>
  </svg>
</div>

ただし、SVGへのリンクなので、マウスホバーしたときに残るライン上のみ有効です。

おそらくご希望のことは、SVGにリンクを設定するのではなく、「Read more」のテキスト、あるいは、btnクラスにリンクを設定したいのではないですか。

「Read more」のテキストにリンク

<div class="btn">
  <a href="https://teratail.com" target="blank">
    Read more
  </a>
  <svg width="130" height="65" viewBox="0 0 130 65" xmlns="http://www.w3.org/2000/svg">
    <rect x='0' y='0' fill='none' width='130' height='65' />
  </svg>
</div>

svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /*追加*/
}

svgがbtnの前面に来てるのでそのままではリンクできないので、z-indexで背面に移動させる。

btnクラスにリンク

<a href="https://teratail.com" target="blank">
  <div class="btn">
    Read more
    <svg width="130" height="65" viewBox="0 0 130 65" xmlns="http://www.w3.org/2000/svg">
      <rect x='0' y='0' fill='none' width='130' height='65' />
    </svg>
  </div>
</a>

CSSは上のと同じ

2020/01/17追記

もう少しスマートな方法を見つけたので追記します。
SVGに pointer-events: all; を設定するだけで全体をクリックできるようになります。

pointer-events - CSS: カスケーディングスタイルシート | MDN

svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: all; 
}

HTMLは一番上のものと同じでOK。

Comments

[退会済みユーザー]

回答ありがとうございました。私の行いたかったことまで汲み取って頂き本当にありがとうございます。まさにその通りでした。