CSS大綱屬性沒有顯示在Firefox中的SVG圖像？

我想要設計一個使用SVG畫布（完整應用使用d3）和畫布上繪製的圖像元素的交互。當用戶懸停或點擊圖片時，我希望每個圖片都以某種方式進行更改，以顯示它已被選中。我能想到的最基本的風格變化是改變圖像的輪廓（即在其周圍繪製邊框），並且這在Chrome 23/Chromium 20上運行良好。但是它對Firefox 16沒有任何影響。CSS大綱屬性沒有顯示在Firefox中的SVG圖像？

的jsfiddle：http://jsfiddle.net/RSLsy/

代碼：

<!DOCTYPE HTML> 
<html> 
<body> 

<style> 
.map { 
    background-color: blue; 
} 
.button:hover { 
    outline: solid medium black; 
} 
</style> 

<div> 
<svg width="400" height="300" class="map"> 
    <image class="button" xlink:href="http://www.gstatic.com/ui/v1/button/search-white.png" 
     x="10" y="10" width="20" height="20"/> 
</svg> 
</div> 

</body> 
</html>

對我怎樣才能實現這種類型的效果跨瀏覽器的任何想法？

在此先感謝！

來源

2012-11-14 Tessa Lau

有沒有這樣的屬性在每http://www.w3.org/TR/SVG/propidx.html SVG輪廓也許你應該對提高瀏覽器的錯誤讓你們覺得有。 –

羅伯特非常有用的圖表。沒有在這裏看到它http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties – WebChemist

感謝羅伯特，這是非常有益的！不幸的是，它看起來像中風這樣的造型屬性都不適用於圖像。 –

如果您不僅限於使用png圖像，而且可能具有像放大鏡一樣的圖標形狀圖像作爲svg路徑，那麼可以使用JQuery爲其填充，描邊等設置動畫效果。這是我爲另一個人製作的小提琴所以關於動畫懸停時顏色變化的問題，您可能可以重新調整。

http://jsfiddle.net/webchemist/hBHBn/

你的情況

你想了jQuery UI顏色插件掛鉤改爲

jQuery.Color.hook('stroke');

獲得輪廓效果。這小提琴應該在IE9和Firefox，歌劇，鉻的所有當前版本和Safari工作

編輯

我更新你的小提琴獲得鉻&同樣的效果火狐W¯¯CSS（還沒有測試其他瀏覽器）通過將圖像元素包裝在具有空矩形的組中，圖像大小和位置相同。不知道爲什麼它不會讓沒有rect元素的圖像元素的大小保持打開狀態。爲每個圖像元素添加重複的空矩形可能並不理想，但可能比爲原始小提琴製作svg路徑更容易解決方案

http://jsfiddle.net/RSLsy/2/

來源

2012-11-14 22:08:16 WebChemist

感謝WebChemist，這是一個非常有創意的解決方案！ –

沒問題，很高興我可以幫忙！ :) – WebChemist

CSS大綱屬性沒有顯示在Firefox中的SVG圖像？

回答

相關問題