我有这段代码，我希望 SVG 对象在悬停时展开。我查找了使 SVG 对象从形状中心扩展的解决方案，但它没有响应。我的另一个尝试是简单地使用 a:hover 和 CSS 转换对其进行转换，但正如您所料，它会缩放，但也会从 Canvas 上移开。
a {
display: block;
width: 1500px;
height: 850px;
transition: all .2s;
font-size: 0;
position: absolute;
background: black;
}
a:hover {
background: gray;
/*Attempt to scale using CSS, but there was a failure
transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);*/
}
svg {
display: block;
height: 0;
}
div#navPanel {
margin-top: 50px;
margin-left: 10vw;
}<head>
<svg>
<defs>
<clipPath id="c1">
<path
d="
M 10, 0
L 200, 80
L 300, 60
Z
"/>
</clipPath>
</defs>
<use xlink:href="#c1" transform="translate(-50,-50) scale (1.5)"/>
</svg>
</head>
<body>
<div id="navPanel">
<a href="#1" class="clipPath1" style="clip-path: url(#c1)">Click me...</a>
</div>
</body>最佳答案
问题出在 <a> 的宽度和高度上标签
这是工作 fiddle :https://jsfiddle.net/0we13sx9/2/
CSS
a {
display: block;
width: 300px;
height: 100px;
transition: all .2s;
font-size: 0;
position: relative;
background: black;
}
a:hover {
background: gray;
/* Attempt to scale using CSS, but there was a failure */
transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
}
svg {
display: block;
height: 0;
}
div#navPanel {
margin-top: 50px;
margin-left: 10vw;
}
关于html - 从中心点缩放的 SVG，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47807728/