css缩放翻译元素而不移动答案

【问题标题】：css scale translated element without movingcss缩放翻译元素而不移动
【发布时间】：2017-12-13 14:38:19
【问题描述】：

我想为一个 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/

【问题讨论】：

标签： css html svg scale

【解决方案1】：

移除 x 和 y 属性并增加父 <g> 元素上的 translate 以进行补偿。

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

【讨论】：

是的，这可行，但我的问题是，在我的中，通常有多个“使用”，而不仅仅是一个。而且我真的很想避免在每个元素周围放置一个额外的我可以尝试使用转换选项而不是 x 和 y 但是然后该类将用比例覆盖它并且元素不再放置在正确的位置位置。