你能創建一個真正圓形的SVG按鈕嗎？

我一直在這裏呆了幾天，在這個問題上找不到任何支持。你能創建一個真正圓形的SVG按鈕嗎？

因此，我爲我的個人網站創建了一個主頁，其中包含各種尺寸的圓形按鈕。最初我使用border-radius屬性（其中工作正常）創建了圈子，但現在我試圖升級到SVG形狀。我發現的是，圍繞任何SVG元素總是存在一個看不見的方框（我認爲這是視圖框）。這意味着我可以點擊按鈕而光標實際上不在按鈕（即視框的角落）上。如果按鈕排成一行並且大小相同，這不會成爲問題，但它們不在一條線上，有些比另一些更大。

有沒有辦法創建一個真正圓形的SVG按鈕？

來源

2016-03-25 GHOST-34

此問題與您使用的SVG無關，以及與您使用HTML的相關內容無關。

默認情況下HTML是所有框。大部分情況沒有四捨五入。

您有兩個可行的選項可以使用。

將border-radius與SVG結合使用。把正確的值不會修剪SVG，它只會刪除可點擊的角落。
使用map。這已經有一段時間了，因此在所有主流瀏覽器中都支持統一的語法。

我建議＃1，因爲它更容易。＃2需要您瞭解更多信息（中心點的半徑爲和）。

來源

2016-03-25 21:33:17 David

哈哈！第一個工作！你知道，我之前也嘗試過這種方法，但沒有奏效。我的CSS一定有一個錯字。感謝您的快速反饋。不超過一個小時前發佈。 –

對於您的假設，「視圖框」實際上更多是一個畫布，是一個矩形，這是正確的。大小在第一個SVG標記（）中給出。

如果讓圖片只在圓圈內部鏈接是非常重要的，你應該添加一些javasript。

如何做到最好取決於你想添加的庫（例如jquery）。

一般來說它是這樣的：

變種X，Y;是SVG中間的鼠標光標的位置（這是最後使用sin和cos的最簡單方法）。
var r;是圓的半徑
var alpha = arctan（y/x）; //點的朝向中間
變種內= Math.abs角度（COS（阿爾法））< Math.abs（X/R）& & Math.abs（SIN（阿爾法））< Math.abs（ Y/R）; //如果點在圓內，則內部爲真

來源

2016-03-25 21:49:06

感謝您的快速反饋！我意識到一個JavaScript解決方案在那裏，但試圖在CSS中單獨（應該指定）。儘管如此，感謝您的回答和快速回復。 –

假設這是內聯SVG，請不要將您的mouseover事件放在SVG元素上，請將您的事件置於SVG形狀上！

#what:hover { 
 
    fill: blue; 
 
}

<svg width="600px" height="600px" > 
 
    <circle id="what" cx="200" cy="200" r="100" fill='red'/> 
 
    </svg>

來源

2016-03-26 02:15:37

你能創建一個真正圓形的SVG按鈕嗎？

回答

相關問題