css scale translated element without moving - css

Question

I would like to animate an svg element and let it scale(2). This works fine but the problem is that my element has an 'x' and 'y' value. Because of this the scale moves the element to a different position.
But I would like to scale it without moving it to a different position. The 'x' and 'y' values are defined somewhere else and I don't would like to "hardcode" the values in my css.
And I don't want to use JS it shoudl be plane css if possible.
Code:
.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>
A code example can be found here:
https://jsfiddle.net/6agd23cL/3/

Answer 1

remove the x and y attributes and increase the translate on the parent <g> element to compensate.
.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>