Making SVG Images anklickbar zum Link

Question

Ich bin ziemlich neu zu SVG-Bildern und Pfaden, aber ich habe dieses Bild, das eine sich ändernde Steigung hat, die ich einen Link zu einigen Web-Adresse (z. B. http://www.google.com) bereitstellen möchte.

Ich bin mir nicht sicher, wie man eine Verbindung zu einer Seite herstellt.

Dies ist der Code für das 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

Verbindungen sind nur <a> Tags umschlungen Zeichnungsobjekte.

<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>