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>

使SVG图像可单击转到链接

1 个答案: