SVG链接一个PNG位图图像忽略透明度（无路径）答案

【问题标题】：SVG link a PNG bitmap image ignoring transparency (without path)SVG链接一个PNG位图图像忽略透明度（无路径）
【发布时间】：2015-11-19 12:48:45
【问题描述】：

我在使用类似于图像映射的方法来链接图像但忽略其透明区域时遇到了困难。想象一下，我有一个带圆角的 PNG 按钮（为了简单起见，这是个不好的例子，我知道 CSS 的边框半径），我只想让按钮本身的光标改变，而忽略它的透明度。

当然我可以这样做：

<image width="438" height="189" xlink:href="button.png"></image>
<a xlink:href="//google.com/">
    <path id="ab" d="M351.371,342.397c-55 …" />
</a>

但是如果我想动态地做到这一点，例如有一个 JS 函数使用相同的技术为不同大小的图像生成标记？也许使用 SVG 蒙版？

下面的sn-p当然是链接全图了……

<a xlink:href="//google.com">
    <image width="438" height="189" xlink:href="button.png"></image>
</a>

【问题讨论】：

标签： html svg bitmap transparency

【解决方案1】：

我在这里遇到了几个关于 svg 中 png 图像的问题。在几个浏览器中似乎对此几乎没有支持。我没有时间测试所有主流浏览器 atm。

但是您试图创建一个带有圆角的按钮，该按钮只能在绘制区域而不是透明部分上单击？为什么不使用 svg rect 创建该按钮？

svg text {
  fill: white;
}
svg rect {
  fill: firebrick;
  stroke: gray;
}
svg a:active rect {
  stroke: black;
}
svg a:active text {
  text-shadow: 2px 2px 2px black;
}

<svg viewBox="0 0 100 100" width="50%">
  <a xlink:href="#">
    <rect x="20" y="30" width="70" rx="5" height="30" />
    <text x="30" y="50">Submit</text>
  </a>
</svg>

【讨论】：

该按钮只是一个示例，用于显示我正在寻找的内容。当然有很多方法可以制作那个按钮，但是如果它是一个不容易重新创建的矢量形状怎么办？
可以用 svg 创建的形状并不多。我承认可能会有限制，但你会得到一个非常接近 svg 的形状。
是的，你可以用多边形标签来描述任何形状。但我想达到同样的效果，而不必描述任何坐标。有点像 Photoshop 中的魔杖：从链接区域中删除所有透明像素。
可能有一种方法可以使用剪辑路径，但它可能有限且浏览器支持不佳。 SVG 在选择形状方面要好得多。由于此功能基本上是所有 svg 形状的默认功能。