html - 将一个矩形替换为另一个 (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>