将一个矩形替换为另一个矩形(html/css)

Question

好吧，这又是针对一个不允许我使用java的学校项目（b/c idk，它太高级了，实际上会让它更有趣......所以基本上我在这个巨大的 svg 文件中有这个矩形。现在，我希望将鼠标悬停在矩形上时此矩形会更改大小。我知道有一种方法可以使用getbox来确定中心，并在将鼠标悬停在它上面时使其变大。由于getbox是java，我不能使用它。所以我想我应该把两个矩形放在一起，一个比另一个稍微大一点，将较大的不透明度设置为 0，然后在上面放一个样式，说当我将鼠标悬停在它上面时，较大的不透明度变为 1，这样看起来矩形的大小正在改变，而实际上它只是从一个矩形切换到另一个矩形。唯一的问题是它不起作用。现在我不知道它是否不起作用 b/c 你不能把两个矩形放在一起，或者如果它不起作用 b/c，那只是完全错误的。

    <g
     inkscape:groupmode="layer"
     id="layer12"
     inkscape:label="Hobitton Cityicon"
     style="display:inline"
     sodipodi:insensitive="true"
     transform="translate(0,-4.0044824)">
    <style type="text/css">
 <![CDATA[   
     #rect10023:hover {opacity: 1!important}    
     ]]>
     </style>
     <a xlink:href="" onclick="window.open('print.html', 'newwindow', 'width=300, height=250'); return false;">
    <rect
       style="fill:#8f1212;fill-opacity:0;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="15"
       height="15"
       x="266.97247"
       y="201.43393" />
     <rect
       style="fill:#000000;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="rect10023b"
       width="8.2568808"
       height="6.880734"
       x="266.97247"
       y="201.43393" ><animate attributeName="fill" begin="2s" dur="2s" values="black;#660000" fill="freeze" />
    </rect></a> 
etc

Answer 1

有一个set元素可以完成这项工作。

<svg width="400" height="200">
  <rect width="300" height="100"
 >
     <set attributeName="width" to="400" begin="mouseenter" end="mouseout"/>
     <set attributeName="height" to="200" begin="mouseenter" end="mouseout"/>
    </rect>
</svg>

不过，我不确定它的支持。

文档：http://www.w3.org/TR/SVG/animate.html#SetElement

或者，您可以使用 CSS 转换。

rect {
    transition-duration: 0.7s;
}
rect:hover {
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
}

<svg width="400" height="200">
  <rect width="300" height="100">
    </rect>
</svg>

Answer 2

rect10023b位于rect10023的顶部，因此您永远无法将鼠标悬停在rect10023上，但悬停CSS仅适用于rect10023。

您需要将底部不透明度的矩形指定为 1，并在悬停时将顶部矩形设置为不透明度 0。

或者，将顶部矩形指针 -events="none"设置为"none"，以便在事件处理中忽略它，以便底部矩形可以拾取悬停。