css 悬停时的svg椭圆颜色

xpcnnkqh  于 2023-05-19  发布在  其他
关注(0)|答案(4)|浏览(151)

我做了一个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>
css

4条答案

按热度按时间
8cdiaqws

8cdiaqws1#

内联css优先于导入的css。使用！important来覆盖它。

.elips:hover
{
    fill:#fce57e !important;
}
赞(0）分享  回复(0）举报  2023-05-19
wnrlj8wa

wnrlj8wa2#

必须覆盖各个<ellipse元素的填充集，例如：

ellipse:hover { fill: #fce57e !important; }
赞(0）分享  回复(0）举报  2023-05-19
yyyllmsg

yyyllmsg3#

Logan Hasbrouck回答：
不，你不能为它创建一个悬停效果，据我所知，因为填充属性适用于整个形状，而不仅仅是它的一部分。

赞(0）分享  回复(0）举报  2023-05-19
rkkpypqq

rkkpypqq4#

你把风格和阶级混在一起了。风格会更受欢迎。
删除样式

style="fill: transparent;stroke:transparent;stroke-width:2"

并把它放在一个类中：

<style>
    elipse { 
        fill: transparent;
        stroke: transparent;
        stroke-width: 2
    }
    
    elipse:hover { 
        fill: #fce57e; 
    }
</style>

也许给予这个类一个更有描述性的名字，比如hotspot或者其他能给这个函数一个提示的名字。

赞(0）分享  回复(0）举报  2023-05-19
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com