<g>.svg 中的元素不会在 :hover (css) 上按比例放大 [英] <g> element inside of a .svg doesn't scale up on :hover (css)
问题描述
我是编码新手,有一些我无法解决的问题,希望您能帮助我.问题是:我已经从 Visio 绘图中导出了一个 svg 文件,现在我试图在这个 svg 中缩放一个元素.我在 css 内悬停时使用了 transform: scale(2) !important
命令,但元素(#shape72-136 - 这是左上角的矩形)有点振动而不是放大.它也不会更改为所需的颜色.
I'm new to coding and have some issues I'm unable to resolve and hope you can help me.
The thing is: I've exported a svg-file out of Visio drawing and now I'm trying to scale an element inside this svg.
I've used the transform: scale(2) !important
command on hover inside the css but the element (#shape72-136 - which is the top left rectangle) is kind of vibrating instead of scaling up. Also it doesn't change to desired color.
希望你能帮我.
.st1 {fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
.st2 {fill:#00b050;font-family:Calibri;font-size:1.00001em}
.st3 {fill:#ffffff;stroke:#00b050;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
.st4 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
#shape72-136:hover {fill:blue !important; width: 400px; height: 100px; transform: scale(2) !important; animation-name: example; animation-duration: 4s; animation-iteration-count: infinite;}
@keyframes example {
0% {
filter: brightness(1);
filter: contrast(1);
}
50% {
filter: brightness(2);
filter: contrast(0.1);
}
100% {
filter: brightness(1);
filter: contrast(1);
}
}
你可以修改代码:https://jsfiddle.net/pickle/kcuntLLz/
推荐答案
这是一种方法,将静态变换移动到 rect 元素上,然后指定 transform-origin 和 transform-box 以确保从 rect 中心进行缩放.
Here's one way, move the static transform onto the rect element and then specify transform-origin and transform-box to ensure that the scaling works from the rect centre.
.st1 {fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
.st2 {fill:#00b050;font-family:Calibri;font-size:1.00001em}
.st3 {fill:#ffffff;stroke:#00b050;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
.st4 {fill:none;
fill-rule:evenodd;
font-size:12px;
overflow:visible;
stroke-linecap:square;
stroke-miterlimit:3}
#shape73-138:hover {
fill: blue !important;
transform: scale(1.5);
/*animation-name: example;*/
animation-duration: 4s;
animation-iteration-count: infinite;
}
#shape73-138 {
transform-origin: center center;
transform-box: fill-box;
}
@keyframes example {
0% {
filter: brightness(1);
filter: contrast(1);
}
50% {
filter: brightness(2);
filter: contrast(0.1);
}
100% {
filter: brightness(1);
filter: contrast(1);
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="9.90261in" height="2.57908in" viewBox="0 0 712.988 185.694" xml:space="preserve" color-interpolation-filters="sRGB" class="st4">
<g>
<g id="shape73-138">
<title>Rechteck.69</title>
<rect transform="translate(48.5326,-103.539)" x="0" y="143.174" width="20.1861" height="42.5197" class="st3"/>
</g>
</g>
</svg>
这篇关于<g>.svg 中的元素不会在 :hover (css) 上按比例放大的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!