Question

我想为svg元素设置动画并让它缩放（2）。这很好但问题是我的元素有一个＆＃39; x＆＃39;并且＆＃39; y＆＃39;值。因此，刻度将元素移动到不同的位置。

但我想在不将其移动到其他位置的情况下进行缩放。＆＃39; x＆＃39;并且＆＃39; y＆＃39;价值是在其他地方定义的，我不想＆＃34;硬编码＆＃34;我的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>

css缩放翻译元素而不移动

1 个答案: