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

我在连接图像但忽略其透明区域的图像映射方法时遇到了困难。想象一下，我有一个带圆角的PNG按钮（为了简单起见，我知道关于CSS边框半径的坏例子），而我只想让光标在按钮本身上改变，忽略其透明度。SVG链接一个忽略透明度的PNG位图图像（没有路径）

当然我可以做这样的：

<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掩码？

当然，下面的代码片段整个图像链接...

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

来源

2015-11-19 Michael Bolli

我所遇到的几个问题在这里SO与SVG PNG图像。在几个浏览器中似乎没有什么支持。我没有时间测试所有主流浏览器。

但是你试图创建一个圆形的玉米只能点击绘制区域，而不是透明部分的按钮？为什么不使用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>

来源

2015-11-19 13:10:47 Persijn

的按钮只显示我正在寻找一个例子。当然，有很多方法可以制作这个按钮，但是如果它的矢量形状不容易恢复，该怎么办？ –

没有很多可以用svg创建的形状。我承认可能会有一些限制，但你会得到一个与svg非常接近的形状。 – Persijn

是的，你大概可以用多边形标签来描述任何形状。但是我想要达到相同的效果而不必描述任何坐标。有点像Photoshop中的魔棒：从链接区域删除任何透明像素。 –

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

回答

相关问题