이동하지 않고 CSS 크기의 변환 된 요소

Question

svg 요소에 애니메이션을 적용하고 크기를 조절합니다 (2). 이 잘 작동하지만 문제는 내 요소가 'x'및 'y'값이 있습니다. 이 때문에 스케일은 요소를 다른 위치로 이동시킵니다.

하지만 다른 위치로 이동하지 않고 크기를 조정하고 싶습니다. 'x'와 'y'값은 다른 곳에 정의되어 있으며 CSS에서 값을 "하드 코드"하고 싶지 않습니다. 그리고 JS 가능한 경우 비행기 css 될 shoudl 사용하고 싶지 않아요.

코드 :

.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> 요소에 번역 증가한다.

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

\t \t <div id="container" style="width: 100%; height: 100%"> 
 
\t \t \t <?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>