Question

我在使用类似图像地图的方法来处理图像但忽略其透明区域时遇到了困难。想象一下，我有一个圆角的PNG按钮（简单的例子，我知道CSS的边界半径），我只想让光标改变按钮本身，忽略它的透明度。

当然我可以这样做：

let curriedF = curry(f) as Float -> Float -> Float

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

以下片段当然会链接整个图片...

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

Answer 1

我在svg中的png图像上遇到过几个关于SO的问题。在几个浏览器中似乎很少支持这一点。我没有时间测试所有主流浏览器。

但是你试图创建一个圆形玉米的按钮，只能在彩绘区域上点击，而不是透明部分？为什么不使用svg rect来创建那个按钮？

＆＃13;

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

＆＃13;

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

＆＃13;

SVG链接PNG位图图像忽略透明度（没有路径）

1 个答案: