Замените один прямоугольник другим (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>

Я не уверен, о его поддержке, хотя.

Doc: 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.

В качестве альтернативы не сделать верхний Rect указатель событий = «нет», поэтому она игнорируется для обработки событий, так что нижний прямоугольник может набирать зависание.