Question

我刚接触编码并遇到一些我无法解决的问题，希望你能帮助我。问题是：我已经从Visio绘图中导出了一个svg文件，现在我正在尝试在这个svg中扩展一个元素。我在css中使用了transform: scale(2) !important命令，但是元素（＃shape72-136 - 左上方的矩形）有点振动而不是按比例放大。它也不会改变为所需的颜色。

希望你能帮助我。

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

Answer 1

这是一种方法，将静态变换移动到rect元素上，然后指定transform-origin和transform-box以确保缩放在rect中心工作。

＆＃13;

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

＆＃13;

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

＆＃13;

.svg中的<g>元素无法扩展：hover（css）

1 个答案: