Question

好的，再一次这是一个学校项目，我不允许使用java（b / c idk，它太先进了，实际上会让它变得更有趣......）所以基本上我有这个这个巨大的svg文件里面有一个矩形。现在我希望这个矩形在我悬停在它上面时改变大小。我知道有一种方法可以让getbox确定中心，并在将鼠标悬停在它上面时使其更大。因为getbox是java，所以我无法使用它。所以我以为我把两个矩形放在一起，一个比另一个略大，将biggers的不透明度设置为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元素。

＆＃13;

<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>

＆＃13;

我不确定它的支持。

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

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 2

rect10023b位于rect10023之上，因此您永远不会将鼠标悬停在rect10023上，而悬停CSS仅适用于rect10023。

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

或者使顶部rect指针-event =“none”，以便在事件处理时忽略它，以便底部rect可以拾取悬停。

用另一个替换一个矩形（html / css）

2 个答案: