在SVG路径上同时使用缩放变换和平移 [英] Use transform with scale and translate together on a svg path
本文介绍了在SVG路径上同时使用缩放变换和平移的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经阅读了关于这个主题的几个帖子，也许会有一些答案。无论我是不理解它，还是它不适合我的问题，这是我的问题：
我有一个路径(在SVG中)，我想将鼠标悬停在它上面并从它的中心展开。然后我考虑了几个选项(比如使用关键帧的动画或使用DOM)。我尝试使用Transform来解决它，但是如果我使用Scale()，它会使路径的坐标远离其中心，并且如果我尝试使用Translate()重新定位路径，它无法识别这两种操作。
我尝试使用&Transform-Origin：Center；(就像某人在另一个主题上的答案一样)，但它改变了一切。我可以同时应用这两种方法的唯一方法是将与缩放和平移一起使用路径标记中的Transform。但在这种情况下，我无法应用悬停。
抱歉，如果已经有答案了。为了避免复制所有代码，我复制了一个SVG标记内的简单框的示例。在我写下的这个示例中，我甚至不能使用缩放操作。
<head>
<style>
#sbox {
transition-duration: 2s
}
#sbox:hover {
transform: scale(2) translate(-50,-50);
}
</style>
</head>
<body>
<svg id="svg1" x="0px" y="0px" viewBox="0 0 1200 1200">
<path id='sbox' d="M 264.9 271.3 L 343.3 271.3 L 343.3 396.1 L 264.9 396.1 L 264.9 271.3 Z" fill='blue'/>
</svg>
</body>
推荐答案
您可以使用Transform-Origin和Transform-Box将矩形居中。
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">#sbox {
transition-duration: 2s;
transform-origin: center;
transform-box:fill-box;
}
#sbox:hover {
transform: scale(2);
} <svg id="svg1" x="0px" y="0px" viewBox="0 0 1200 1200">
<path id='sbox' d="M 264.9 271.3 L 343.3 271.3 L 343.3 396.1 L 264.9 396.1 L 264.9 271.3 Z" fill='blue'/>
</svg>这篇关于在SVG路径上同时使用缩放变换和平移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
