CODEWITHSUNDEEP
csshtmlsvgscale
MARL
MARL

Reputation: 41

css scale translated element without moving

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/

Upvotes: 4

Views: 3715

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

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>

Upvotes: 1

Related Questions