可靠和可點擊svg

我想在svg中創建一組圖標，在其中有一些懸停效果。然後，我將這些圖標中的每一個都包裝在<a>中，但是當頁面加載時，圖標不可點擊，但顯示其懸停效果。可靠和可點擊svg

我已經試過許多修復，如附加絕對定位的：與之前的高度和寬度和透明背景，它創建了一個可點擊區域，但圖標本身則失去交互性。我也嘗試過使用<img>中的svg，它再次允許它被點擊，但失去了它的交互性。

這是代碼設置我使用：

<a href="/batteries" class="svg-link"> 
    <object type="image/svg+xml" class="svg-icon" data="{{ asset('img/icons/servicing/batteries-car-active.svg') }}"> 
    </object> 
</a>

懸停效果是在SVG文件本身。

來源

2015-09-29 Sam Willis

嘿，我認爲這是已經在這裏找到答案：HTTP： //stackoverflow.com/questions/11374059/make-an-html-svg-object-also-a-clickable-link – Persijn

最簡單的方法是讓SVG處理點擊。目前你希望容器處理一些交互和內容來處理一些內容，但這不會很容易飛行。 –

Persijn我以前看了這個問題的答案，不幸的是使用「」意味着我失去了對SVG的懸停效果。 @RobertLongson我該如何去構建它更好的工作？ –

這有固定的問題：

<a xlink:href="/servicing/{{ $masterTemplateType }}/batteries"> 
</a>

的<a>被纏繞在SVG的機構，<style>後和收盤前</svg>

來源

2015-09-29 11:15:40

可靠和可點擊svg

回答

相關問題