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位圖圖像（沒有路徑）

回答

相關問題