[英]Svg hover rect change color
所以我有這個巨大的svg文件,其中包含一個小矩形。 當你將鼠標懸停在它上面時,我希望這個矩形能夠改變顏色。 我不能使用onmouseover b / c這是java,這是一個學校項目,我們被告知我們只能使用html,html5,css和css3。 我一直在嘗試各種各樣的事情,我無法弄清楚為什么它不起作用。 我只添加了矩形g容器位。 我正在使用的樣式代碼。 我已經嘗試將這個樣式代碼添加到標題中,緊跟在svg開始標記之后,進入g容器,進入rect本身(在這種情況下沒有樣式標記)。 我可以添加整個svg文件,但那個東西很大,所以我只會根據要求這樣做。
<g
inkscape:groupmode="layer"
id="layer12"
inkscape:label="Hobitton Stadticon"
style="display:inline"
sodipodi:insensitive="true"
>
<style type="text/css">
<![CDATA[
.rect10023:hover {fill: #0000FF;}]]>
</style>
<rect
style="fill:#DF0101;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;"
id="rect10023"
width="8.2568808"
height="6.880734"
x="266.97247"
y="201.43393"
/>
<text
xml:space="preserve"
style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="343.72607"
y="-32.097607"
id="text10025"
sodipodi:linespacing="125%"
transform="matrix(0.72346735,0.6903586,-0.6903586,0.72346735,0,0)"
inkscape:transform-center-x="10.550459"
inkscape:transform-center-y="-7.7981651"><tspan
sodipodi:role="line"
id="tspan10027"
x="343.72607"
y="-32.097607"
style="font-size:14px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Chiller;-inkscape-font-specification:Chiller">Hobbiton</tspan></text>
</g>
1)rect有一個id - 而不是一個類,所以使用#rect10023:hover
2)您需要從內聯樣式OR中刪除rect的填充
你需要使用fill: #0000FF!important;
在你的班上
這是因為您使用內聯樣式定義了矩形的填充,並且您正在為類設置樣式而不是ID。 改變.
#
和刪除fill:#DF0101;
和懸停工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.