关于 Svg 使用 transform：scale（）缩放后元素发生位移的问题，修改元素缩放中心点
接到一个需求，是公司前辈用 svg 写的代码结构，现在要让画布上的元素在发生改变，放大缩小的时候，保持画布不动，让元素实现原地缩放，让我们现来看看原本的效果是如何的 当我在点击放大或者缩小的时候元素发生了位移，而现在我需要实现的是元素在原地进行放大和缩小的效果。 有试过给 svg 添加 viewBox 属性，这样确实能让元素实现原地的方法和缩小功能，但是，缩放的中心点还是无法改变，而我的项目添加 viewBox 后很奇怪的会引起其他的一些问题，这让我放弃了使用 viewBox 后来在查阅 C3的 transform 属性时 发现了可以设置 scale 的基准点来达到效果。 可以使用 transform-origin 来调整缩放的基准点
// transform-origin transform-origin: 10px 10px; transform-origin：center;transform-origin 有两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；这两个参数除了可以设置为具体的像素值，还可以直接指定一个参数为left、center、right，那么第二个参数可以指定为top、center、bottom 由于我需要的是中心点缩放，即让元素一直保持在画布的中间位置，当我给 svg 内的标签添加transform-origin：center上属性后，就可以了，注意：是添加 css 样式。 看一下最终的实现效果，这样，再次点击，放大或缩小时元素就会在中心进行缩放，不会发生位移情况
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
