css缩放翻译元素而不移动

Question

我想为 svg 元素设置动画并让它缩放 (2)。这工作正常，但问题是我的元素有一个 'x' 和 'y' 值。因此，比例尺将元素移动到不同的位置。

但我想在不将其移动到不同位置的情况下对其进行缩放。 'x' 和 'y' 值在其他地方定义，我不想在我的 css 中“硬编码”这些值。 而且我不想使用 JS，如果可能的话，它应该是平面 css。

代码:

.hello {
             transition: 1s;
height: 100px;
width: 100px;
margin: 100px;
background-color: red;
transform-origin: center center;
position:relative;

        }
         .hello:hover {

transform: scale(4);
}


  <use
   id="=test"

   xlink:href="#but"
   x="100" y="20"
   width="100%"
   height="100%"
 class="hello">
  <title
     id="title31">
            I am an example toolTip
        </title>
</use>

可在此处找到代码示例:

https://jsfiddle.net/6agd23cL/3/

Answer 1

删除 x 和 y 属性并增加父级的翻译 <g>补偿元素。

	.hello {
				 transition: 1s;
    height: 100px;
    width: 100px;
    margin: 100px;
	background-color: red;
	transform-origin: center center;
	position:relative;
   
			}
			 .hello:hover {
    
	transform: scale(4);
    }

		<div id="container" style="width: 100%; height: 100%">
			<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
  
   xmlns="http://www.w3.org/2000/svg"
 
   id="target"
   width="3600"
   height="4100"
   style="top:0;left:0;"
   version="1.1">
  <defs
     id="styles">
    <g
       id="but">
      <style
         id="style11">
                .cls-1{fill:#ffc60b;}.cls-2{stroke:#231f20;stroke-width:0.5px;}.cls-3{fill:#fff;opacity:0.1;}
            </style>
      <rect
         id="Frame"
         width="12"
         height="12"
         x="0.25"
         y="0.25"
         class="cls-1"
         rx="2"
         ry="2" />
      <circle
         id="circle14"
         cx="6.25"
         cy="6.25"
         r="4.5"
         class="cls-2" />
      <circle
         id="Highlight"
         cx="6.25"
         cy="6.25"
         r="3"
         class="cls-3" />
    </g>
  </defs>

  <g
     id="view"
     transform="translate(114.386917,29.7722462)">

     <use
       id="=test"
       
       xlink:href="#but"

       width="100%"
       height="100%"
 class="hello">
      <title
         id="title31">
                I am an example toolTip
            </title>
    </use>

  </g>
</svg>
</div>

</html>