.svg 中的 <g> 元素不会在 :hover (css) 上按比例放大

Posted

技术标签:

【中文标题】.svg 中的 <g> 元素不会在 :hover (css) 上按比例放大【英文标题】:<g> element inside of a .svg doesn't scale up on :hover (css) 【发布时间】:2021-08-12 07:09:19 【问题描述】:

我是编码新手,遇到了一些我无法解决的问题,希望您能帮助我。 问题是:我已经从 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/

【问题讨论】:

亲爱的罗伯特,感谢您的快速回复!我踢出了很多代码。 它可以在没有内联 transform="translate(48.5326,-103.539)" 语句的情况下工作。但是是否有可能保持形状的位置并仍然按比例放大? 【参考方案1】:

这是一种方法,将静态变换移动到 rect 元素上,然后指定 transform-origin 和 transform-b​​ox 以确保从 rect 中心进行缩放。

.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"   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"   class="st3"/>
        </g>
    </g>
</svg>

【讨论】:

谢谢,罗伯特。我会测试它!

以上是关于.svg 中的 <g> 元素不会在 :hover (css) 上按比例放大的主要内容,如果未能解决你的问题,请参考以下文章

如何获取 svg:g 元素的宽度

从另一个文档导入 SVG 元素,而不会丢失原始文件中的 CSS <style>

SVG中如何获取元素的坐标?

如何设置 SVG <g> 元素的样式?

SVG <g> 元素大小设置为零,尽管它有孩子[重复]

SVG <g> 和 <text> 元素的默认宽度/边距/填充是多少?