我想要对一个svg元素进行动画,并让它缩放(2)。这个方法可以正常工作,但问题在于我的元素有一个“x”和“y”值。因此,缩放会将元素移动到不同的位置。
但我想要在不改变位置的情况下进行缩放。'x'和'y'的值在其他地方定义,我不想在我的CSS中“硬编码”这些值。如果可能的话,我不想使用JS,应该只用纯CSS。
代码如下:
(注:该链接为英文网站,无中文页面)
但我想要在不改变位置的情况下进行缩放。'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/
(注:该链接为英文网站,无中文页面)