svg 内部元素scale 缩放不在原位置解决办法

最新推荐文章于 2024-03-15 14:11:56 发布
最新推荐文章于 2024-03-15 14:11:56 发布
阅读量5.1k 收藏
点赞数
文章标签： javascript java ViewUI
原文链接：https://juejin.im/post/5becf7a9f265da613f2f0b0a
版权

svg 内部元素放大或者缩小默认是通过svg画布 x0 , y0 进行缩放的，即元素的x，y 会变大或者变小，导致元素不在缩放之前的位置

解决办法就是，在缩放之前先设置元素的坐标为x0，y0 然后进行缩放，缩放完之后在移动到目标，x，y

transform:scale(2)translate(x,y)复制代码


weixin_34189116
关注
SVG排版围绕中心点缩放操作
懂点君
10-27 600
模板代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" /> <title>公众号：懂点君 || 视频号
【Python数据分析与可视化】期末复习试题集
热门推荐
风口IT猪的成长录
12-03 2万+
1.Jupyter notebook不具备的功能是 （） Jupyter notebook可以直接生成一份交互式文档 Jupyter notebook可以安装Python库 Jupyter notebook可以导出HTML文件 Jupyter notebook可以将文件分享给他人 right_answers: Jupyter notebook可以将文件分享给他人 2.在Jupyter notebook的命令模式下，要查看所有快捷..
SVG对象绕着坐标中心实现旋转缩放平移
05-21
解决svg对象，位置有偏移量时旋转缩放会产生偏移。绕着坐标（x,y）中心，原点 旋转缩放平移
解决 Svg transform scale（）缩放后元素不在中心点的问题 原地缩放！！！修改缩放中心点
m0_46456663的博客
06-19 9959
关于 Svg 使用 transform：scale（）缩放后元素发生位移的问题，修改元素缩放中心点 接到一个需求，是公司前辈用 svg 写的代码结构，现在要让画布上的元素在发生改变，放大缩小的时候，保持画布不动，让元素实现原地缩放，让我们现来看看原本的效果是如何的 当我在点击放大或者缩小的时候元素发生了位移，而现在我需要实现的是元素在原地进行放大和缩小的效果。 有试过给 svg 添加 viewBox 属性，这样确实能让元素实现原地的方法和缩小功能，但是，缩放的中心点还是无法改变，而我的项目添加 viewBo
css scale 元素不放大,CSS3 transform scale缩放问题
weixin_39825322的博客
08-03 1294
碰到一个问题，在vue项目中引入animate.css来实现过渡动画，然而出现了一些怪异的问题。发生的问题如图所示该图出现的问题为节点的位置和尺寸都是按比例为1:1时的状态，而非当前尺寸和位置该图出现的问题真不知道怎么描述，同一份代码在不同电脑的谷歌浏览器竟然表现不一致，一台显示正常，另一台出现的问题如图，位置发生了偏移。确认过同一份代码，浏览器都是最新版本的谷歌浏览器animate.css中起作...
vue2 ，移动端实现SVG拖拽缩放，保持缩放中心点svg-pan-zoom + hammerjs （ 二 ）
C_jian_的博客
05-29 1905
如果想要某种情况的时候 svg某个坐标去聚焦。1.缩放的同时保持屏幕的中心点不会变，此功能一次一次的优化，这是最终版了就。使用vue，实现SVG的拖拽缩放，2.同时增加某坐标点的聚焦。
svg在html里按比例缩小,浏览器之间的HTML中的SVG缩放不一致
weixin_42116791的博客
06-15 1310
我正在尝试在HTML中使用SVG，这一点我不太熟悉。它作为一个对象嵌入在html中。浏览器之间的HTML中的SVG缩放不一致SVG可通过CSS进行扩展。当窗口处于全尺寸状态(即足够大以至于SVG达到CSS的最大允许宽度时)，在Firefox，Chrome和Safari中看起来很正常。当浏览器窗口很小时，实际的SVG图像以及我认为它的容器在Firefox和Chrome中适当缩小。但是，在Safari...
史上最全的web前端面试题汇总及答案
qianduan666a的博客
07-20 1265
史上最全的web前端面试题汇总及答案 很早之前就在看web前端面试题，一直想总结一个比较全面又详细的面试题库，现在总结了一些，分享给大家，以后还会持续更新，有些题目有多种答案，本文只给出其中一种，哪里有问题的欢迎指出。 Html&CSS 1、谈谈你对web标准的理解 web标准的理解 2、列举html中至少三个实体 &amp、&nbsp 、&lt、&gt、&reg、&copy 详细请看w3schoolHTML实体符号参考手册w.
CSS权威指南第五版-第17章 变形
leyan1618的博客
02-20 2429
CSS权威指南第五版笔记 第17章 变形
web前端手册
caiqian97的博客
08-28 1775
HTML基础 1. HTML 文件中的 DOCTYPE 是什么作用？ HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准 DOCTYPE 即 Document Type，网页文件的文档类型标准。 主要作用是告诉浏览器的解析器要使用哪种 HTML规范 或 XHTML规范 来解析页面。 DOCTYPE 需要放置在 HTML 文件的 <html>标签之前，如： <!DOCTYPE html> <html> ... </html> (目前主流) &
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
m0_55613022的博客
02-24 3209
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
svg整体缩放至指定大小
weixin_30851409的博客
07-29 2109
一、问题 svg画面跑在分辨率低的电脑上，导致不能完全显示。 二、要求 svg要能够根据电脑的屏幕大小自动缩放至适配电脑的尺寸。 三、实现 1.获取本机窗口高度、宽度 let clientWidth = document.documentElement.clientWidth, clientHeight = document.documentElement....
svg属性介绍
风如也的博客
04-24 1207
渐变 渐变分线性渐变和径向渐变，必须给渐变内容指定一个id属性，否则文档内的其他元素就不能引用它。为了让渐变能被重复使用，渐变内容需要定义在<defs>标签内部，而不是定义在形状上面。 线性渐变 即沿直线改变颜色，要插入一个线性渐变，在svg内部创建<defs>，并在<defs>内部创建一个<linearGradient>节点 <head> <style> .stop1 { stop-color: rgb(200
svg css动画缩放中心点偏移问题
qq_41704942的博客
09-01 489
svg动画
在svg文间画图过程中放大缩小图片后，坐标偏移问题
rainbow的专栏
03-17 8604
<br />  //鼠标坐标：在SVG经过缩放、偏移、ViewBox转换后，鼠标坐标值<br />      var mouseCoord = {<br />          x : 0.,<br />          y : 0.<br />          };<br />      //用户坐标：相对于原始SVG,坐标位置    <br />      var userCoord = {<br />          x : 0.,    <br />          y : 0.<br />
SVG进阶-坐标与变换
natsu-cc的博客
03-25 1235
transform svg 中的transform可以写在属性中,也可以写在css中，写在css中要遵循css的规则，在这里就不详细去介绍了，这里主要介绍一下svg的transform属性。 svg的transform属性包括：位移translate, 旋转rotate, 缩放scale, 斜切skew以及直接矩阵matrix. 但只局限于2D层面的变换。SVG似乎只支持二维变换（若有不对，欢迎指正），且类似translateX, rotateX也都是不支持的。 css中transform其坐标是相对于当
使用svg标签 解决实现图片的放大，缩小，和拖拽效果的问题。
jdhrucn的博客
08-11 3793
viewBox的前两个属性是截图框的位置，而后面的两个属性是”截图框“的大小。只要后面监听鼠标的滚动事件，向上就是把viewBox的后两个属性变小就会实现放大效果，线下就是把viewBox的后两个属性变大。拖拽的实现只需要改变我们的viewBox前两个属性就可以了，viewBox的第一个属性是svg框的距离图片左上角的x，第二个是y。A点到放大后的图片的最左边的距离就是我们viewBox中的第一个属性x ，距离最上边那就是第二个属性y。1.首先我们要实现放大，缩小，和拖拽的前提是把图片利用svg显示。
Svg学这些就够了-transform（二）
eaziyytt的专栏
02-26 1932
上一节《Svg学这些就够了-组合复用（一）》我们学习了svg的组合复用，一次定义就可以在图中任意引用了，不过如果只是简单引用未免太就小看svg的功能了，再组合复用的基础上，我们本节详细介绍下svg的transform属性功能，这个属性非常强大。 tranform属性用来对一个元素声明一个或多个变换。它输入一个带有顺序的变换定义列表的<transform-list>值。每个变换定义由空格或逗号隔开。有效地SVG变换有：平移、缩放、旋转,、倾斜。transform属性中使用的变换函数类似于C.
缩略svg的简单方法
最新发布
易之阴阳，量子纠缠，道之一体，缘起性空
03-15 1546
然后，你可以找到SVG的根元素（svg标签），并修改其width和height属性，或者视口(viewBox)属性来实现整体缩放。在上述例子中，原SVG的视口是100x100单位，若要将其缩小一半，我们将viewBox改为0 0 50 50，这意味着SVG现在仅展示原始大小的一半区域。通过修改SVG自身的viewBox属性，可以调整SVG的内容区域的显示比例。// 缩放SVG：这里假设你要将宽度和高度都缩小为原来的一半。// 创建一个新的SVG文档，以适应新的尺寸。// 复制原始SVG内容到新的文档中。
Svg 动画 transform scale 中心缩放
05-21
要实现 SVG 动画中心缩放的效果，可以通过以下步骤来操作： 1. 首先，将 SVG 元素进行定位，使其位于页面居中位置。可以使用 CSS 中的“position”属性和“transform”属性来实现。 2. 然后，使用 SVG 动画中的“animateTransform”元素来实现缩放动画。通过设置“attributeName”属性为“transform”，“attributeType”属性为“XML”，“type”属性为“scale”，“from”属性为“1”，“to”属性为所需缩放的值，以及“begin”和“dur”属性来控制动画的起始时间和持续时间。 3. 最后，通过设置“transform-origin”属性来指定缩放的中心点。可以将其设置为“50% 50%”，即 SVG 元素的中心点。 下面是一个示例代码，可以参考一下： ```html <svg width="200" height="200"> <rect x="50" y="50" width="100" height="100" fill="red"> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="0.5" begin="0s" dur="1s" /> </rect> </svg> ``` 在上面的代码中，矩形元素被定位于 SVG 元素的中心位置，并且设置了一个缩放动画，持续时间为 1 秒。缩放的中心点被设置为矩形元素的中心点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值