我做了一个SVG椭圆,里面有正方形 我正试图在鼠标悬停时为方块着色,我试图使用国际象棋,但没有发生任何事情,我在这里搜索但没有找到答案,希望你们能帮助我!
.elips:hover{
fill: #fce57e;
}
也许你们知道该怎么做。
这是我的SVG椭圆:
<svg id="cvg" height="520" width="1200" style=";z-index: 101;">
<line id="0" x1="70" y1="290" x2="790" y2="290" class="classLine path" style="stroke:#0A0A0A;stroke-width:2;z-index: 1;" /><text x="0" y="290" fill="rgb(149, 197, 193)">0</text>
<ellipse id="180" class="elips elipsBig pathCircle" cx="430" cy="282" rx="360" ry="260" style="fill: transparent;stroke:black;stroke-width:2" />
<ellipse id="179" class="elips" cx="430" cy="282" rx="358" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="178" class="elips" cx="430" cy="282" rx="356" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="177" class="elips" cx="430" cy="282" rx="354" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="176" class="elips" cx="430" cy="282" rx="352" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="175" class="elips" cx="430" cy="282" rx="350" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="174" class="elips" cx="430" cy="282" rx="348" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="173" class="elips" cx="430" cy="282" rx="346" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="172" class="elips" cx="430" cy="282" rx="344" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="171" class="elips" cx="430" cy="282" rx="342" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="170" class="elips elipsBig pathCircle" cx="430" cy="282" rx="340" ry="260" style="fill: transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />
<ellipse id="169" class="elips" cx="430" cy="282" rx="338" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="168" class="elips" cx="430" cy="282" rx="336" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="167" class="elips" cx="430" cy="282" rx="334" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="166" class="elips" cx="430" cy="282" rx="332" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="165" class="elips" cx="430" cy="282" rx="330" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="164" class="elips" cx="430" cy="282" rx="328" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="163" class="elips" cx="430" cy="282" rx="326" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="162" class="elips" cx="430" cy="282" rx="324" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="161" class="elips" cx="430" cy="282" rx="322" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="160" class="elips elipsBig pathCircle" cx="430" cy="282" rx="320" ry="260" style="fill: transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />
<ellipse id="159" class="elips" cx="430" cy="282" rx="318" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="158" class="elips" cx="430" cy="282" rx="316" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="157" class="elips" cx="430" cy="282" rx="314" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="156" class="elips" cx="430" cy="282" rx="312" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="155" class="elips" cx="430" cy="282" rx="310" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="154" class="elips" cx="430" cy="282" rx="308" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="153" class="elips" cx="430" cy="282" rx="306" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="152" class="elips" cx="430" cy="282" rx="304" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="151" class="elips" cx="430" cy="282" rx="302" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="150" class="elips elipsBig pathCircle" cx="430" cy="282" rx="300" ry="260" style="fill: transparent;stroke:black;stroke-width:2" />
<ellipse id="149" class="elips" cx="430" cy="282" rx="298" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="148" class="elips" cx="430" cy="282" rx="296" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="147" class="elips" cx="430" cy="282" rx="294" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="146" class="elips" cx="430" cy="282" rx="292" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="145" class="elips" cx="430" cy="282" rx="290" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="144" class="elips" cx="430" cy="282" rx="288" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="143" class="elips" cx="430" cy="282" rx="286" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="142" class="elips" cx="430" cy="282" rx="284" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="141" class="elips" cx="430" cy="282" rx="282" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="140" class="elips elipsBig pathCircle" cx="430" cy="282" rx="280" ry="260" style="fill: transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />
<ellipse id="139" class="elips" cx="430" cy="282" rx="278" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="138" class="elips" cx="430" cy="282" rx="276" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="137" class="elips" cx="430" cy="282" rx="274" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="136" class="elips" cx="430" cy="282" rx="272" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="135" class="elips" cx="430" cy="282" rx="270" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="134" class="elips" cx="430" cy="282" rx="268" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="133" class="elips" cx="430" cy="282" rx="266" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="132" class="elips" cx="430" cy="282" rx="264" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="131" class="elips" cx="430" cy="282" rx="262" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="130" class="elips elipsBig pathCircle" cx="430" cy="282" rx="260" ry="260" style="fill: transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />
<ellipse id="129" class="elips" cx="430" cy="282" rx="258" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="128" class="elips" cx="430" cy="282" rx="256" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="127" class="elips" cx="430" cy="282" rx="254" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="126" class="elips" cx="430" cy="282" rx="252" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="125" class="elips" cx="430" cy="282" rx="250" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="124" class="elips" cx="430" cy="282" rx="248" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="123" class="elips" cx="430" cy="282" rx="246" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="122" class="elips" cx="430" cy="282" rx="244" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="121" class="elips" cx="430" cy="282" rx="242" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="120" class="elips elipsBig pathCircle" cx="430" cy="282" rx="240" ry="260" style="fill: transparent;stroke:black;stroke-width:2" />
<ellipse id="119" class="elips" cx="430" cy="282" rx="238" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="118" class="elips" cx="430" cy="282" rx="236" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="117" class="elips" cx="430" cy="282" rx="234" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="116" class="elips" cx="430" cy="282" rx="232" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="115" class="elips" cx="430" cy="282" rx="230" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="114" class="elips" cx="430" cy="282" rx="228" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="113" class="elips" cx="430" cy="282" rx="226" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="112" class="elips" cx="430" cy="282" rx="224" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="111" class="elips" cx="430" cy="282" rx="222" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="110" class="elips elipsBig pathCircle" cx="430" cy="282" rx="220" ry="260" style="fill: transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />
<ellipse id="109" class="elips" cx="430" cy="282" rx="218" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="108" class="elips" cx="430" cy="282" rx="216" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="107" class="elips" cx="430" cy="282" rx="214" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="106" class="elips" cx="430" cy="282" rx="212" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="105" class="elips" cx="430" cy="282" rx="210" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="104" class="elips" cx="430" cy="282" rx="208" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="103" class="elips" cx="430" cy="282" rx="206" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="102" class="elips" cx="430" cy="282" rx="204" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="101" class="elips" cx="430" cy="282" rx="202" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="100" class="elips elipsBig pathCircle" cx="430" cy="282" rx="200" ry="260" style="fill: transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />
<ellipse id="99" class="elips" cx="430" cy="282" rx="198" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="98" class="elips" cx="430" cy="282" rx="196" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="97" class="elips" cx="430" cy="282" rx="194" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="96" class="elips" cx="430" cy="282" rx="192" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="95" class="elips" cx="430" cy="282" rx="190" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="94" class="elips" cx="430" cy="282" rx="188" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="93" class="elips" cx="430" cy="282" rx="186" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="92" class="elips" cx="430" cy="282" rx="184" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="91" class="elips" cx="430" cy="282" rx="182" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="90" class="elips elipsBig pathCircle" cx="430" cy="282" rx="180" ry="260" style="fill: transparent;stroke:black;stroke-width:2" />
<ellipse id="89" class="elips" cx="430" cy="282" rx="178" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="88" class="elips" cx="430" cy="282" rx="176" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="87" class="elips" cx="430" cy="282" rx="174" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="86" class="elips" cx="430" cy="282" rx="172" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="85" class="elips" cx="430" cy="282" rx="170" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="84" class="elips" cx="430" cy="282" rx="168" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="83" class="elips" cx="430" cy="282" rx="166" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="82" class="elips" cx="430" cy="282" rx="164" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="81" class="elips" cx="430" cy="282" rx="162" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="80" class="elips elipsBig pathCircle" cx="430" cy="282" rx="160" ry="260" style="fill:transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />
<ellipse id="79" class="elips" cx="430" cy="282" rx="158" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="78" class="elips" cx="430" cy="282" rx="156" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="77" class="elips" cx="430" cy="282" rx="154" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="76" class="elips" cx="430" cy="282" rx="152" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="75" class="elips" cx="430" cy="282" rx="150" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="74" class="elips" cx="430" cy="282" rx="148" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="73" class="elips" cx="430" cy="282" rx="146" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="72" class="elips" cx="430" cy="282" rx="144" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="71" class="elips" cx="430" cy="282" rx="142" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="70" class="elips elipsBig pathCircle" cx="430" cy="282" rx="140" ry="260" style="fill:transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />
<ellipse id="69" class="elips" cx="430" cy="282" rx="138" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="68" class="elips" cx="430" cy="282" rx="136" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="67" class="elips" cx="430" cy="282" rx="134" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="66" class="elips" cx="430" cy="282" rx="132" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="65" class="elips" cx="430" cy="282" rx="130" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="64" class="elips" cx="430" cy="282" rx="128" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="63" class="elips" cx="430" cy="282" rx="126" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="62" class="elips" cx="430" cy="282" rx="124" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="61" class="elips" cx="430" cy="282" rx="122" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="60" class="elips elipsBig pathCircle" cx="430" cy="282" rx="120" ry="260" style="fill:transparent;stroke:black;stroke-width:2" />
<ellipse id="59" class="elips" cx="430" cy="282" rx="118" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="58" class="elips" cx="430" cy="282" rx="116" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="57" class="elips" cx="430" cy="282" rx="114" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="56" class="elips" cx="430" cy="282" rx="112" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="55" class="elips" cx="430" cy="282" rx="110" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="54" class="elips" cx="430" cy="282" rx="108" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="53" class="elips" cx="430" cy="282" rx="106" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="52" class="elips" cx="430" cy="282" rx="104" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="51" class="elips" cx="430" cy="282" rx="102" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="50" class="elips elipsBig pathCircle" cx="430" cy="282" rx="100" ry="260" style="fill:transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />
<ellipse id="49" class="elips" cx="430" cy="282" rx="98" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="48" class="elips" cx="430" cy="282" rx="96" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="47" class="elips" cx="430" cy="282" rx="94" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="46" class="elips" cx="430" cy="282" rx="92" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="45" class="elips" cx="430" cy="282" rx="90" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="44" class="elips" cx="430" cy="282" rx="88" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="43" class="elips" cx="430" cy="282" rx="86" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="42" class="elips" cx="430" cy="282" rx="84" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="41" class="elips" cx="430" cy="282" rx="82" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="40" class="elips elipsBig pathCircle" cx="430" cy="282" rx="80" ry="260" style="fill:transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />
<ellipse id="39" class="elips" cx="430" cy="282" rx="78" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="38" class="elips" cx="430" cy="282" rx="76" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="37" class="elips" cx="430" cy="282" rx="74" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="36" class="elips" cx="430" cy="282" rx="72" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="35" class="elips" cx="430" cy="282" rx="70" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="34" class="elips" cx="430" cy="282" rx="68" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="33" class="elips" cx="430" cy="282" rx="66" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="32" class="elips" cx="430" cy="282" rx="64" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="31" class="elips" cx="430" cy="282" rx="62" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="30" class="elips elipsBig pathCircle" cx="430" cy="282" rx="60" ry="260" style="fill:transparent;stroke:black;stroke-width:2" />
<ellipse id="29" class="elips" cx="430" cy="282" rx="58" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="28" class="elips" cx="430" cy="282" rx="56" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="27" class="elips" cx="430" cy="282" rx="54" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="26" class="elips" cx="430" cy="282" rx="52" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="25" class="elips" cx="430" cy="282" rx="50" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="24" class="elips" cx="430" cy="282" rx="48" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="23" class="elips" cx="430" cy="282" rx="46" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="22" class="elips" cx="430" cy="282" rx="44" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="21" class="elips" cx="430" cy="282" rx="42" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="20" class="elips elipsBig pathCircle" cx="430" cy="282" rx="40" ry="260" style="fill:transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />
<ellipse id="19" class="elips" cx="430" cy="282" rx="38" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="18" class="elips" cx="430" cy="282" rx="36" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="17" class="elips" cx="430" cy="282" rx="34" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="16" class="elips" cx="430" cy="282" rx="32" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="15" class="elips" cx="430" cy="282" rx="30" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="14" class="elips" cx="430" cy="282" rx="28" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="13" class="elips" cx="430" cy="282" rx="26" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="12" class="elips" cx="430" cy="282" rx="24" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="11" class="elips" cx="430" cy="282" rx="22" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="10" class="elips elipsBig pathCircle" cx="430" cy="282" rx="20" ry="260" style="fill:transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />
<ellipse id="9" class="elips" cx="430" cy="282" rx="18" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="8" class="elips" cx="430" cy="282" rx="16" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="7" class="elips" cx="430" cy="282" rx="14" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="6" class="elips" cx="430" cy="282" rx="12" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="5" class="elips" cx="430" cy="282" rx="10" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="4" class="elips" cx="430" cy="282" rx="8" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="3" class="elips" cx="430" cy="282" rx="6" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="2" class="elips" cx="430" cy="282" rx="4" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<ellipse id="1" class="elips" cx="430" cy="282" rx="2" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
<line class="path" id="00" x1="430" y1="22" x2="430" y2="532" style="stroke:black;stroke-width:2;z-index: 1;" />
<line id="80" x1="318" y1="35" x2="544" y2="35" class="classLine 80 path" style="stroke:rgb(21, 19, 19);stroke-width:2;z-index: 1;" /> <text x="250" y="35" fill="rgb(149, 197, 193)">80</text>
<line id="60" x1="174" y1="99" x2="685" y2="99" class="classLine 70 path" style="stroke:rgb(21, 19, 19);stroke-width:2;z-index: 1;" /> <text x="105" y="99" fill="rgb(149, 197, 193)">60</text>
<line id="40" x1="110" y1="161" x2="748" y2="161" class="classLine 40 path" style="stroke:rgb(21, 19, 19);stroke-width:2;z-index: 1;" /> <text x="52" y="161" fill="rgb(149, 197, 193)">40</text>
<line id="20" x1="77" y1="226.75" x2="782" y2="226.75" class="classLine 20 path" style="stroke:rgb(21, 19, 19);stroke-width:2;z-index: 1;" /> <text x="23" y="226.75" fill="rgb(149, 197, 193)">20</text>
<line id="-20" x1="82" y1="345" x2="780" y2="345" class="classLine 200 path" style="stroke:rgb(21, 19, 19);stroke-width:2;z-index: 1;" /> <text x="23" y="345" fill="rgb(149, 197, 193)">20</text>
<line id="-40" x1="110" y1="399" x2="750" y2="399" class="classLine 400 path" style="stroke:rgb(21, 19, 19);stroke-width:2;z-index: 1;" /> <text x="52" y="410.5" fill="rgb(149, 197, 193)">40</text>
<line id="-60" x1="160" y1="453" x2="700" y2="453" class="classLine 600 path" style="stroke:rgb(21, 19, 19);stroke-width:2;z-index: 1;" /> <text x="105" y="460" fill="rgb(149, 197, 193)">60</text>
<line id="-80" x1="245" y1="506" x2="613" y2="506" class="classLine 800 path" style="stroke:rgb(21, 19, 19);stroke-width:2;z-index: 1;" /> <text x="200" y="515" fill="rgb(149, 197, 193)">80</text>
<line id="10" x1="72" y1="259.625" x2="790" y2="259.625" class="classLine" style="stroke:rgba(2, 2, 2, 0.11);;stroke-width:2;z-index: 1;" />
<line id="30" x1="92" y1="193.875" x2="770" y2="193.875" class="classLine" style="stroke:rgba(2, 2, 2, 0.11);;stroke-width:2;z-index: 1;" />
<line id="50" x1="139" y1="130" x2="720" y2="130" class="classLine" style="stroke:rgba(2, 2, 2, 0.11);;stroke-width:2;z-index: 1;" />
<line id="70" x1="228" y1="67" x2="633" y2="67" class="classLine" style="stroke:rgba(2, 2, 2, 0.11);;stroke-width:2;z-index: 1;" />
<line id="-10" x1="72" y1="317.5" x2="790" y2="317.5" class="classLine" style="stroke:rgba(2, 2, 2, 0.11);;stroke-width:2;z-index: 1;" />
<line id="-70" x1="198" y1="479.5" x2="663" y2="479.5" class="classLine" style="stroke:rgba(2, 2, 2, 0.11);;stroke-width:2;z-index: 1;" />
<line id="-30" x1="92" y1="372" x2="770" y2="372" class="classLine" style="stroke:rgba(2, 2, 2, 0.11);;stroke-width:2;z-index: 1;" />
<line id="-50" x1="130" y1="426" x2="730" y2="426" class="classLine" style="stroke:rgba(2, 2, 2,0.11);stroke-width:2;z-index: 1;" /> <text x="52" y="410.5" fill="rgb(149, 197, 193)">40</text>
</svg>
答案 0 :(得分:0)
您必须覆盖单个<ellipse
元素的填充集,例如:
ellipse:hover { fill: #fce57e !important; }
答案 1 :(得分:0)
内联css优先于导入的css。使用!important来覆盖它。
.elips:hover
{
fill:#fce57e !important;
}
答案 2 :(得分:0)
Logan Hasbrouck回答:
根据我所知,不能为它创建悬停效果 fill属性适用于整个形状,而不仅仅是一部分 它