属性“转换”适用于某些元素，而不适用于其他元素 Chrome iOS答案

【问题标题】：Attribute "transform" works for some elements, not others Chrome iOS属性“转换”适用于某些元素，而不适用于其他元素 Chrome iOS
【发布时间】：2020-12-10 06:47:35
【问题描述】：

如果我的格式很粗糙，请先发帖致歉 - 我将尝试提供详细的问题信息。背景信息 - 我需要使用 Javascript 对嵌套的 SVG 元素执行转换。平台：谷歌浏览器 iOS

问题描述：添加 transform 属性时，父 SVG hangar 不会进行转换。

hangar.setAttribute("transform", "scale(" + scale + ") " + 
"translate(" + translateValues.x + "," + translateValues.y + ") ");

当添加 transform 属性时，子 SVG towG 会进行变换。

towG.setAttribute("transform", "scale(" + (100/slider.value)*towScale + ")");

这可能相关也可能不相关，但 transform 是在子 SVG 上的标记上执行的。

提前致谢，德里克

编辑当我记录 hangar.getAttribute("transform") 时，会打印预期值，但未转换机库 SVG。

【问题讨论】：

transform 是最外层 <svg> 元素的有效属性，仅从规范版本 2 开始。 Webkit（这是 Chrome 在 iOS 下必须使用的渲染引擎）可能还没有实现。检查它是否适用于其他操作系统的 Chrome。（macOS、Windows、Linux）
@ccprog 所有转换都可以在 Chrome 桌面上运行！在处理这个项目时，我发现父 SVG 的 SVG 子级不响应 transform，只响应包装器中的 transform 标签。有趣的是，only 元素是最外层的

标签： javascript css ios google-chrome svg

【解决方案1】：

尝试在没有 Javascript 的 CSS 文件中本地实现支持。如果它不起作用，那么 Google Chrome iOS 仍然没有实现对 transform 属性的支持，不幸的是:(

用户代理扫描效率低下，但这是确定移动用户是否拥有适用于 iOS 的 Chrome 的唯一方法。

我建议使用 CSS 媒体查询，然后扫描是否显示 X 元素，这意味着显示是您指定的大小，如果返回 true，则开始扫描。您必须找到用户代理字符串并在其中某处搜索“Chrome iOS”。

编辑：我在浏览器上安装了用户代理管理器扩展，我从中得到的用户代理字符串是这样的：Mozilla/5.0 (iPhone; CPU iPhone OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/80.0.3987.95 Mobile/15E148 Safari/604.1。希望对你有帮助

如果在 Chrome iOS 上，那么你想用类似的东西替换那个属性，以保持兼容性，部分兼容总比没有好。

与此同时，您可能希望就此问题向 Google 提交报告，因为 Chrome iOS 是一个相当大的用户群，您不希望继续做出这些例外。

【讨论】：

【解决方案2】：

不要设置属性transform，而是尝试在style 中设置transform：

hangar.style.transform = "scale(" + scale + ") " + "translate(" + translateValues.x + "px," + translateValues.y + "px) ";

towG.style.transform = "scale(" + (100/slider.value)*towScale + ")";

【讨论】：

感谢土豆的回复！当我检查“transform”属性时，使用 .style.transform 设置转换会导致 null 值，而我目前这样做的方式是看到预期值但未执行转换。
transform as style 和 transform as attribute 语法冲突。 CSS translate() 必须使用单位并且参数之间必须有空格。 CSS scale() 的变换中心（边界框的中心）与属性（用户空间坐标系的原点）不同。