2つのシェイプのSVG、2つのクリック可能なリンク

Question

以前はSVGで作業したことがありませんでしたが、私が必要とするこのシェイプを作成できました。二つの三角形、画像と各：

<svg viewbox="0 0 10 6.7"> 
 
    <defs> 
 
\t <clipPath id="top"> 
 
\t \t <polygon points="0 0, 9.9 0, 0 6.6" /> 
 
\t </clipPath> 
 
\t <clipPath id="bottom"> 
 
\t <polygon points="10 0.1, 10 6.7, 0.1 6.7" /> 
 
\t </clipPath> 
 
    </defs> 
 
\t <image xlink:href="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/30423_pets-products_january-site-flip_3-cathealth_short-tile_592x304._CB286975940_.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#top)" data-state='top'/> 
 
\t <image xlink:href="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#bottom)" data-state='bottom'/> 
 
</svg>

はしかし、今私は、これらの画像のそれぞれが何かにリンクしたいです。画像とポリゴンタグの周りに<a xlink:href="url-to-go-to">を追加しようとしましたが、うまくいかなかった。

したがって、このSVG内で2つの別々のリンク（ポリゴンごとに1つ）を作成するにはどうすればよいですか？

Answer 1

<a>イメージの周りのタグは私のために働きます。おそらくあなたはそれらを適切に閉じなかったでしょうか？

<svg viewbox="0 0 10 6.7"> 
 
    <defs> 
 
    <clipPath id="top"> 
 
     <polygon points="0 0, 9.9 0, 0 6.6" /> 
 
    </clipPath> 
 
    <clipPath id="bottom"> 
 
     <polygon points="10 0.1, 10 6.7, 0.1 6.7" /> 
 
    </clipPath> 
 
    </defs> 
 
    <a xlink:href="http://ebay.com"> 
 
    <image xlink:href="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/30423_pets-products_january-site-flip_3-cathealth_short-tile_592x304._CB286975940_.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#top)" data-state='top'/> 
 
    </a> 
 
    <a xlink:href="http://amazon.com"> 
 
    <image xlink:href="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#bottom)" data-state='bottom'/> 
 
    </a> 
 
</svg>