chrome对svg的缩放有bug

最新推荐文章于 2025-04-22 18:22:38 发布
最新推荐文章于 2025-04-22 18:22:38 发布
阅读量297 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mochong/article/details/84127801
本文讨论了在Google Chrome Frame中直接通过JavaScript操作SVG缩放的问题。指出此种操作方式无效，并给出了解决方案，即通过将缩放代码放置在SVG标签内的<script>标签中来实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

http://groups.google.com/group/google-chrome-frame/browse_thread/thread/8b32568e6cf93452/ed2a45ac49ee9833?#ed2a45ac49ee9833
svgRoot.currentScale * 0.67;
这样直接在js中操作是无效的。若放在svg标签里面的<script>，则生效。
demo
http://stonelee.info/demos/currentscale_bug_in_chrome15/index.html
12、HTML5媒体与JavaScript API及SVG的应用
cnn8visionary的博客
07-15 10
本博文深入探讨了HTML5中`<video>`和`<audio>`元素的JavaScript API应用，以及如何利用SVG（可缩放矢量图形）增强视频的样式和交互体验。内容涵盖音量控制、SVG基本形状与视频的结合、SVG遮罩技术、以及使用SVG实现自定义视频控制的方法。同时，分析了不同浏览器对SVG与视频结合应用的支持情况，并提供了开发流程和兼容性处理的建议，旨在帮助开发者打造更加丰富和精彩的HTML5多媒体应用。
14、HTML5 媒体与图形：SVG 与 Canvas 的深度解析
最新发布
cnn8visionary的博客
07-17 8
本博客深入解析了HTML5中媒体与图形的处理方式，重点探讨了<video>元素与SVG及Canvas的交互和实现方法。内容涵盖SVG作为遮罩、滤镜应用、内联控件以及在Canvas中处理视频帧的技术，同时对不同实现方法进行了对比分析，并展望了未来HTML5媒体与图形功能的发展趋势。通过详细的代码示例与浏览器兼容性说明，为开发者提供实用的参考。
svg在html里按比例缩小,浏览器之间的HTML中的SVG缩放不一致
weixin_42116791的博客
06-15 1397
我正在尝试在HTML中使用SVG，这一点我不太熟悉。它作为一个对象嵌入在html中。浏览器之间的HTML中的SVG缩放不一致SVG可通过CSS进行扩展。当窗口处于全尺寸状态(即足够大以至于SVG达到CSS的最大允许宽度时)，在Firefox，Chrome和Safari中看起来很正常。当浏览器窗口很小时，实际的SVG图像以及我认为它的容器在Firefox和Chrome中适当缩小。但是，在Safari...
理解SVG的缩放、偏移的计算公式
甘焕的博客
05-29 9177
SVG中DOM元素的偏移与缩放都是基于SVG元素的左上角，所以如何理解与计算SVG中元素的真实位置就比较难，下面的例子都以圆(circle)为例。1.缩放假定缩放的比例为s，执行缩放后，圆的圆心坐标由(cx, cy)变为(cx * s, cy * s)2. 偏移假定偏移的距离为(x1, y1), 执行单纯的偏移后，圆的圆心坐标由(cx, cy)变为(cx + x1, cy + y1)3. 先偏移后缩
手动更新svg的transform属性后可能出现缩放移动时的跳跃现象
Keepyourself_XD的博客
11-03 292
实现在svg画布上进行某元素定位，将视图坐标更换成功后，进行移动缩放操作，页面出现坐标跳跃。
理解SVG的缩放 偏移的计算公式
qq_44884577的博客
04-19 1552
理解SVG的缩放 偏移的计算公式
java fx svg 图像 缩放 控件,JS操作svg图形缩放有误差值
weixin_39792751的博客
03-13 147
问题描述我在开发一个svg的编辑器网页版,目前在做缩放的内容是,发现JS操作svg的时候 缩放会有误差原理是 每个图形有个外框 我拉伸外框 然后用拉伸后的外框宽或者高去除以拉伸前的宽或者高,得到拉伸了多少这个倍率,然后将倍率赋值给svg的scale(x,y)属性问题出现的环境背景及自己尝试过哪些方法用的是谷歌浏览器,目前不考虑其他浏览器的兼容,试过调整过缩放比例 还是没用相关代码// 请把代码文本...
vector-icons:Chrome扩展程序可在chrome源代码存储库中绘制矢量图标-vector source code
03-25
"vector source code"暗示了该扩展可能提供了矢量图标的源代码，使得用户可以自定义或编辑这些图标，同时对矢量图形有深入的理解。 【描述解析】 描述简洁地重申了标题中的信息，即"vector-icons:Chrome扩展程序可...
前端领域：Less 与 SVG 样式的结合应用
小白菜的博客
04-22 979
在前端开发中，样式的管理和优化是至关重要的。Less 作为一种 CSS 预处理器，提供了变量、混合、嵌套等强大的功能，能够提高代码的可维护性和复用性。而 SVG（可缩放矢量图形）则以其高质量、可缩放的特点，在网页设计中得到了广泛的应用。本文章的目的在于探讨如何将 Less 的优势应用到 SVG 样式的设计和管理中，通过结合两者的特性，为前端开发者提供更高效、灵活的样式解决方案。文章将涵盖 Less 和 SVG 的基本概念、结合的原理和方法、实际应用案例以及相关工具和资源的推荐。
React项目中轻松加载SVG图标的react-svg-injector工具包
6. 如果对react-svg-injector有任何改进建议或发现bug，可以通过官方仓库的issue跟踪器或直接发送pull request来进行贡献。 总结而言，react-svg-injector作为一个简单的工具包，旨在简化React项目中SVG图标的加载...
需要显示滚动条的SVG
04-30
需要显示滚动条的SVG
获取SVG中g标签的宽度高度及位置坐标
shidouyu的专栏
02-26 2522
获取SVG中g标签的宽度高度及位置坐标 1. 问题的出现 对于普通的HTML元素，有很多获得其宽度width、高度height、距左left、距顶top等属性的方法： 类似offsetWidth，clientWidth,width之类的，通过查看DOM元素的属性可以一探究竟： 然而当遇到SVG的g标签的时候，却碰到问题了： 明明在开发者工具中可以显示的宽高、位置坐标等属性，通过原有的offsetWidth，ClientWidth获得值却为undefined: 这说明，普通的DOMElenme
SVG在低版本ImageView中的兼容
binaryshao
06-17 6731
最近写了一个svg动画，显示在<imageview>中，svg是5.0以上新引入的特性，在低版本中需要做好兼容，否则运行在低版本上程序会直接crash。 网上找了一下，教程还是挺多的。主要是以下两步： 使用较新版本的v7兼容库23.2.0 在build里加一行代码 在xml中使用app:srcCompat代替android:src但是发现虽然能跑起来，但svg直接没有显示了，看不到。 在谷歌官网
svg缩放移动、移动轨迹追溯_如何使用 SVG 进行缩放和平移
weixin_39565390的博客
12-21 824
展开全部该教程介绍了用于配置报表服务器、管理报表服务器内容和操作以及创建与发布报表和报表模型的工具。本教e69da5e6ba9062616964757a686964616f31333337373662程旨在于帮助新用户了解如何查找和打开各个工具。如果您已经熟悉了这些工具，您可以转到其他教程学习有关使用 Reporting Services 的重要技能。有关其他教程的详细信息，请参阅如何查找教程 (...
HTML实现图形拖拽,SVG图形拖动功能的实现
weixin_42370743的博客
06-07 1745
实现的功能在界面上将有一些图形，你可以随意拖动这些图形，可以把它们互相叠加在一起。一旦图形被拖入到黄色矩形框中，就不可以移动了 HTML文件可拖动文本JS文件var svgDoc = null;var svgRoot = null;var trueCoords = null;//记录元素在视口中的实际坐标var grabCoords = null;//表示视图经过缩放或移动后的点在视口中的坐标va...
svg 内部元素scale 缩放不在原位置解决办法
weixin_34189116的博客
11-15 5246
svg 内部元素放大或者缩小默认是通过svg画布 x0 , y0 进行缩放的，即元素的x，y 会变大或者变小，导致元素不在缩放之前的位置解决办法就是，在缩放之前先设置元素的坐标为x0，y0 然后进行缩放，缩放完之后在移动到目标，x，ytransform:scale(2)translate(x,y)复制代码...
在svg文间画图过程中放大缩小图片后，坐标偏移问题
rainbow的专栏
03-17 8726
<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图形的缩放问题
热门推荐
dyw的专栏
08-17 1万+
在使用SVG图形的过程中，不知道大家有没有碰到过有些SVG图形不能缩放的问题。不能缩放的SVG图形将被当前的可视区域裁减。其实，这些图形稍加修改后就可以缩放了。做法如下：定义viewBox属性，width、heigth可以使用相对值或使用绝对值，使用绝对值时viewBox要略大于width与height。一个例子：http://www.w3.org/2000/svg" xmlns:xl
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值