改變筆觸顏色爲聯SVG

我試圖改變懸停內嵌SVG的筆觸顏色。這是一個從Illustrator中導出並通過Peter Collingridge的SVG優化器的路徑。我閱讀的內置SVG樣式的文章非常直截了當，但這些技術在我的SVG上不起作用。

我在標籤上放置了一個懸停僞類，似乎無法定位筆畫。

<svg class="highlight" width="86" height="68" viewBox="0 0 85.7 68.5"> 
    <polygon points="11 60.7 74.7 60.7 42.8 4.4 " style="fill:none;stroke-width:3;stroke:#491EC4"/> 
</svg>

我設置背景顏色爲粉紅色來檢查懸停是否正常工作，這很好。

.highlight:hover { 
    background-color: pink; 
    stroke: red; 
}

這是jsfiddle。

我也嘗試將多邊形封裝在具有ID的使用標記中，以便在CSS中更改筆劃以及將Svg選擇器添加到筆劃：inherit中，如Codrops文章中的建議。另外，jQuery的懸停方法沒有運氣。

我在做什麼錯，爲什麼這三種技術不起作用？

第2期

崇高文本2將無法識別筆觸屬性。當我在CSS和HTML中輸入時，它會顯示爲白色。這是否意味着它是無效的？我查看了CSS3插件的README文件，以查看它添加的內容，並且沒有「中風」屬性。我應該在測試版中使用Sublime Text 3嗎？

所有這些事情......

來源

2016-06-21 dho

我會強烈建議升級到崇高的文本3（ST3）不管 - 有超過2年的改進數量驚人 - 三年前發佈*。我已經使用了3年，並且它是穩定的 - 它仍然具有「測試版」標籤，但它很久以前就已經過測試版了。現在所有的開發工作都集中在ST3上 - [*''我不知道有什麼理由不使用Sublime Text 3「*]（https://forum.sublimetext.com/t/sublime-text-2 - 不發達/ 18680/4） - 威爾邦德，ST核心開發者。此外，ST2 [不再是默認下載]（https://sublimetext.com）。 – MattDMo

感謝提示@MattDMo。非常感謝您的詳細回覆。 – dho

走在SVG的CSS是內嵌 CSS和後你stylsheet所以被應用，因此被覆蓋它。

最簡單的解決方案是從SVG中xxtract CSS並將它放在樣式表中。

.highlight { fill: none; stroke-width: 3; stroke: #491EC4; } .highlight:hover { /* background-color: pink; */ stroke: red; }

<svg class="highlight" width="86" height="68" viewBox="0 0 85.7 68.5"> <polygon points="11 60.7 74.7 60.7 42.8 4.4 " /> </svg>

來源

2016-06-21 09:30:50

謝謝Paulie_D。得到它了。 – dho

你需要選擇多邊形標籤，因爲這樣標籤的風格有一個行程。由於它已用內聯樣式進行了裝飾，因此您的CSS規則應使用!important以覆蓋內聯樣式。

.highlight:hover { 
 
    background-color: pink; 
 
} 
 
.highlight:hover polygon{ 
 
    stroke: red !important; 
 
}

<svg class="highlight" width="86" height="68" viewBox="0 0 85.7 68.5"> 
 
    <polygon points="11 60.7 74.7 60.7 42.8 4.4 " style="fill:none;stroke-width:3;stroke:#491EC4"/> 
 
</svg>

免責聲明：這將是優選提取聯樣式，並將其移動到自己的CSS文件（如Paulie_D提到）。如果以任何方式提取是不可能的，你可以用!important

來源

2016-06-21 09:27:58 Lars

謝謝拉爾斯。希望我能給兩個蜱。 – dho

在你的HTML樣式屬性覆蓋你的CSS選擇器。因此，在CSS中包含所有樣式屬性。

檢查的jsfiddle鏈接;）

https://jsfiddle.net/ojn8r810/3/

HTML

<svg class="highlight" width="86" height="68" viewBox="0 0 85.7 68.5"> 
    <polygon points="11 60.7 74.7 60.7 42.8 4.4 "/> 
</svg>

CSS

.highlight { 
    fill:none; 
    stroke-width:3px; 
    stroke:#491EC4; 
} 
.highlight:hover { 
    background-color: pink; 
    stroke: red; 
}

來源

2016-06-21 09:31:45

太簡單了。非常感謝。 – dho

改變筆觸顏色爲聯SVG

回答

相關問題