SVG悬停矩形改变颜色

Posted 2023-05-08

【中文标题】SVG悬停矩形改变颜色

【英文标题】：Svg hover rect change color

【发布时间】：2015-01-29 07:23:27

【问题描述】：

所以我有这个包含一个小矩形的巨大 svg 文件。当你将鼠标悬停在它上面时，我希望这个矩形改变颜色。我不能使用 java 的 onmouseover b/c，这是一个学校项目，我们被告知只能使用 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"
       
       
       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）矩形有一个 id - 不是一个类，所以使用#rect10023:hover 2）你要么需要从内联样式中删除矩形的填充，要么你需要在课堂上使用填充：#0000FF!important;

天哪，谢谢！现在工作正常！感谢您的快速响应！

【参考方案1】：

1) rect 有一个 id - 不是一个类，所以使用#rect10023:hover

2) 您要么需要从内联样式中删除矩形的填充，要么

你需要在课堂上使用fill: #0000FF!important;

【参考方案2】：

这是因为您使用内联样式定义了矩形的填充，并且您设置的是类而不是 ID。将. 更改为# 并删除fill:#DF0101; 并且悬停工作。