我多次使用一張 svg 圖像并使用 of<use>標簽。我想單獨更改懸停顏色。（全部使用相同的顏色）svg:hover path, svg:hover use { fill:red;}<svg xmlns="http://www.w3.org/2000/svg" width="40.994" height="33.25" viewBox="0 0 40.994 33.25"> <path id="Path_2" data-name="Path 2" d="M50.981,35.251c15.487,0,23.913-12.754,23.913-23.913V10.2a18.512,18.512,0,0,0,4.1-4.327,18.905,18.905,0,0,1-4.783,1.366,8.861,8.861,0,0,0,3.644-4.555,20.889,20.889,0,0,1-5.238,2.05A8.133,8.133,0,0,0,66.468,2a8.557,8.557,0,0,0-8.427,8.427,4.44,4.44,0,0,0,.228,1.822A23.546,23.546,0,0,1,40.961,3.366a8.722,8.722,0,0,0-1.139,4.327,9.049,9.049,0,0,0,3.644,7.06,7.678,7.678,0,0,1-3.872-1.139h0a8.323,8.323,0,0,0,6.832,8.2,7.021,7.021,0,0,1-2.277.228,3.876,3.876,0,0,1-1.594-.228,8.628,8.628,0,0,0,7.971,5.921A17.2,17.2,0,0,1,40.05,31.379,6.305,6.305,0,0,1,38,31.151a21.5,21.5,0,0,0,12.981,4.1" transform="translate(-37.999 -2)" fill="#25a1f2" fill-rule="evenodd"/></svg><svg xmlns:xlink="http://www.w3.org/1999/xlink"> <use class="ic-1" xlink:href="#Path_2" /></svg><svg xmlns:xlink="http://www.w3.org/1999/xlink"> <use class="ic-2" xlink:href="#Path_2" /></svg><svg xmlns:xlink="http://www.w3.org/1999/xlink"> <use class="ic-3" xlink:href="#Path_2" /></svg>
1 回答
MM們
TA貢獻1886條經驗 獲得超2個贊
首先為每個 SVG 指定正確的視圖框并隱藏主視圖框，然后您可以依靠 CSS 變量來調整顏色
path {
fill:var(--c,#25a1f2);
}
svg:hover use {
--c:red;
}
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" >
<path id="Path_2" data-name="Path 2"
d="M50.981,35.251c15.487,0,23.913-12.754,23.913-23.913V10.2a18.512,18.512,0,0,0,4.1-4.327,18.905,18.905,0,0,1-4.783,1.366,8.861,8.861,0,0,0,3.644-4.555,20.889,20.889,0,0,1-5.238,2.05A8.133,8.133,0,0,0,66.468,2a8.557,8.557,0,0,0-8.427,8.427,4.44,4.44,0,0,0,.228,1.822A23.546,23.546,0,0,1,40.961,3.366a8.722,8.722,0,0,0-1.139,4.327,9.049,9.049,0,0,0,3.644,7.06,7.678,7.678,0,0,1-3.872-1.139h0a8.323,8.323,0,0,0,6.832,8.2,7.021,7.021,0,0,1-2.277.228,3.876,3.876,0,0,1-1.594-.228,8.628,8.628,0,0,0,7.971,5.921A17.2,17.2,0,0,1,40.05,31.379,6.305,6.305,0,0,1,38,31.151a21.5,21.5,0,0,0,12.981,4.1"
transform="translate(-37.999 -2)" fill-rule="evenodd"/>
</svg>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="40.994" height="33.25" viewBox="0 0 40.994 33.25">
<use class="ic-1" xlink:href="#Path_2" />
</svg>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="40.994" height="33.25" viewBox="0 0 40.994 33.25">
<use class="ic-2" xlink:href="#Path_2" />
</svg>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="40.994" height="33.25" viewBox="0 0 40.994 33.25">
<use class="ic-3" xlink:href="#Path_2" />
</svg>
或者依賴 currentColor：
svg {
color:#25a1f2;
}
svg:hover use {
color:red;
}
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" >
<path id="Path_2" data-name="Path 2"
d="M50.981,35.251c15.487,0,23.913-12.754,23.913-23.913V10.2a18.512,18.512,0,0,0,4.1-4.327,18.905,18.905,0,0,1-4.783,1.366,8.861,8.861,0,0,0,3.644-4.555,20.889,20.889,0,0,1-5.238,2.05A8.133,8.133,0,0,0,66.468,2a8.557,8.557,0,0,0-8.427,8.427,4.44,4.44,0,0,0,.228,1.822A23.546,23.546,0,0,1,40.961,3.366a8.722,8.722,0,0,0-1.139,4.327,9.049,9.049,0,0,0,3.644,7.06,7.678,7.678,0,0,1-3.872-1.139h0a8.323,8.323,0,0,0,6.832,8.2,7.021,7.021,0,0,1-2.277.228,3.876,3.876,0,0,1-1.594-.228,8.628,8.628,0,0,0,7.971,5.921A17.2,17.2,0,0,1,40.05,31.379,6.305,6.305,0,0,1,38,31.151a21.5,21.5,0,0,0,12.981,4.1"
transform="translate(-37.999 -2)" fill="currentColor" fill-rule="evenodd"/>
</svg>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="40.994" height="33.25" viewBox="0 0 40.994 33.25">
<use class="ic-1" xlink:href="#Path_2" />
</svg>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="40.994" height="33.25" viewBox="0 0 40.994 33.25">
<use class="ic-2" xlink:href="#Path_2" />
</svg>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="40.994" height="33.25" viewBox="0 0 40.994 33.25">
<use class="ic-3" xlink:href="#Path_2" />
</svg>
- 1 回答
- 0 關注
- 186 瀏覽
添加回答
舉報
0/150
提交
取消