Question

我有许多SVG图标，我希望它们在单击时充当超链接。

我尝试了几种不同的方法，但是结果总是一样的，可点击的区域仅限于SVG的path，或者使用类似的，其中笔接触了纸。

因此，某些图标具有较大的不可点击区域：

是否可以在图标周围定义边框并使之可单击？ EG：

这是我到目前为止所拥有的：

/* -----
 * SVG Icons - svgicons.sparkk.fr
 * ----- */

.svg-icon {
  width: 3em;
  height: 3em;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #4691f6;
}

.svg-icon circle {
  stroke: #4691f6;
  stroke-width: 1;
}

<html>
  <head>
    <title>Test Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="svgicons.css">
  </head>
  <body>    
    <div style="text-align:center">
        <h1>Test Page</h1>
        <h2>For Testing Purposes</h2>
        <!-- GitHub -->
        <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" xmlns:xlink="http://www.w3.org/1999/xlink">>
            <a xlink:href="https://github.com">
			    <title>GitHub</title>
                <path d="M13.97 1.57c-7.03 0-12.733 5.703-12.733 12.74 0 5.622 3.636 10.393 8.717 12.084.637.13.87-.277.87-.615 0-.302-.013-1.103-.02-2.165-3.54.77-4.29-1.707-4.29-1.707-.578-1.473-1.413-1.863-1.413-1.863-1.154-.79.09-.775.09-.775 1.276.104 1.96 1.316 1.96 1.312 1.135 1.936 2.99 1.393 3.712 1.06.116-.823.445-1.384.81-1.704-2.83-.32-5.802-1.414-5.802-6.293 0-1.39.496-2.527 1.312-3.418-.132-.322-.57-1.617.123-3.37 0 0 1.07-.343 3.508 1.305 1.016-.282 2.105-.424 3.188-.43 1.082 0 2.167.156 3.198.44 2.43-1.65 3.498-1.307 3.498-1.307.695 1.754.258 3.043.13 3.37.815.903 1.314 2.038 1.314 3.43 0 4.893-2.978 5.97-5.814 6.286.458.388.876 1.16.876 2.358 0 1.703-.016 3.076-.016 3.482 0 .334.232.748.877.61 5.056-1.687 8.7-6.456 8.7-12.08-.055-7.058-5.75-12.757-12.792-12.75z"/>
            </a>
        </svg>
    </div>
  </body>
</html>

Answer 1

我已经评论过，我会在路径前添加一个透明的矩形。请注意添加的属性pointer-events="all"使其可点击。

/* -----
 * SVG Icons - svgicons.sparkk.fr
 * ----- */

.svg-icon {
  width: 3em;
  height: 3em;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #4691f6;
}

.svg-icon circle {
  stroke: #4691f6;
  stroke-width: 1;
}

 <div style="text-align:center">
        <h1>Test Page</h1>
        <h2>For Testing Purposes</h2>
        <!-- GitHub -->
        <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" xmlns:xlink="http://www.w3.org/1999/xlink">>
            <a xlink:href="https://github.com">
			    <title>GitHub</title>
          <!--add a transparent rect before the path --> 
          <rect width="28" height="28" style="fill:none" pointer-events="all"></rect> 
                <path d="M13.97 1.57c-7.03 0-12.733 5.703-12.733 12.74 0 5.622 3.636 10.393 8.717 12.084.637.13.87-.277.87-.615 0-.302-.013-1.103-.02-2.165-3.54.77-4.29-1.707-4.29-1.707-.578-1.473-1.413-1.863-1.413-1.863-1.154-.79.09-.775.09-.775 1.276.104 1.96 1.316 1.96 1.312 1.135 1.936 2.99 1.393 3.712 1.06.116-.823.445-1.384.81-1.704-2.83-.32-5.802-1.414-5.802-6.293 0-1.39.496-2.527 1.312-3.418-.132-.322-.57-1.617.123-3.37 0 0 1.07-.343 3.508 1.305 1.016-.282 2.105-.424 3.188-.43 1.082 0 2.167.156 3.198.44 2.43-1.65 3.498-1.307 3.498-1.307.695 1.754.258 3.043.13 3.37.815.903 1.314 2.038 1.314 3.43 0 4.893-2.978 5.97-5.814 6.286.458.388.876 1.16.876 2.358 0 1.703-.016 3.076-.016 3.482 0 .334.232.748.877.61 5.056-1.687 8.7-6.456 8.7-12.08-.055-7.058-5.75-12.757-12.792-12.75z"/>
            </a>
        </svg>
    </div>

SVG边界框-超链接

1 个答案: