SVG画像をクリック可能にするリンク先へ移動

Question

私はSVGの画像とパスにはまったく新しいですが、変化するグラデーションを持つこの画像を取得していますので、いくつかのウェブアドレス（例えばhttp://www.google.com）へのリンクを提供したいと思います。

ページへのリンクを作成する方法がわかりません。

これは、SVGのコードです：

<svg> 
     <defs> 
      <linearGradient id="colorGradient"> 
       <stop offset="0%" stop-color="green" stop-opacity=".5"> 
       <animate attributeName="stop-color" values="green;blue;red;red;black;red;red;purple;green" dur="18s" repeatCount="indefinite"></animate> 
       </stop> 
       <stop offset="0.0536421" stop-color="green" stop-opacity=".5"> 
        <animate attributeName="stop-color" values="green;orange;purple;purple;black;purple;purple;blue;green" dur="18s" repeatCount="indefinite"></animate> 
        <animate attributeName="offset" values=".95;.80;.60;.40;.20;0;.20;.40;.60;.80;.95" dur="18s" repeatCount="indefinite"></animate> 
       </stop> 
      </linearGradient> 
     </defs> 
    <g fill="url(#colorGradient)"> 
     <path xmlns="http://www.w3.org/2000/svg" d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"/> 
    </g> 
</svg> 

Answer 1

リンクは、描画オブジェクトをラッピングした<a>タグです。

<svg> 
 
     <defs> 
 
      <linearGradient id="colorGradient"> 
 
       <stop offset="0%" stop-color="green" stop-opacity=".5"> 
 
       <animate attributeName="stop-color" values="green;blue;red;red;black;red;red;purple;green" dur="18s" repeatCount="indefinite"></animate> 
 
       </stop> 
 
       <stop offset="0.0536421" stop-color="green" stop-opacity=".5"> 
 
        <animate attributeName="stop-color" values="green;orange;purple;purple;black;purple;purple;blue;green" dur="18s" repeatCount="indefinite"></animate> 
 
        <animate attributeName="offset" values=".95;.80;.60;.40;.20;0;.20;.40;.60;.80;.95" dur="18s" repeatCount="indefinite"></animate> 
 
       </stop> 
 
      </linearGradient> 
 
     </defs> 
 
    <a xlink:href="www.google.com"> 
 
    <g fill="url(#colorGradient)"> 
 
     <path xmlns="http://www.w3.org/2000/svg" d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"/> 
 
    </g> 
 
    </a> 
 
</svg>