这不是重复的。我已经浏览了所有其他答案。

我有一个 [a, b, c, d, e, f] svg 变换矩阵。我想将它分解成任何一系列的平移/缩放/旋转（带有可选中心）操作。偏斜不是一种选择。我试图适应 Android Vector Drawable Group 提供的 7 个属性（例如，rotation、pivotX、pivotY、scaleX、scaleY、translateX、translateY）。

我的第一个问题是，所有这些矩阵都可能吗？如果矩阵沿任一轴倾斜，是否可以通过一系列旋转|缩放操作来渲染？如果不是所有的矩阵都是可能的，是否有可能检测到它们何时不是？

第二个问题是对基本数学的一些帮助。我得到了translateX = e和translateY = f。如果scaleX = ab和c 为零。但是当 b 和 c 不为零时，旋转和缩放会纠缠在一起。我怎样才能解开这些？scaleY = d

我有一个 SVG 元素，需要在周围绘制变换点。我正在使用 svg.js 及其调整大小插件的一部分。

它适用于移动和旋转未变换的元素，但不适用于具有变换矩阵的元素。

简而言之，我需要从一个元素中获取转换并将其应用于一个组。我设法做到了，但直到我改变了元素的 x、y、宽度或高度。

以下片段说明了我的意思。标记为“Steps1..3”的按钮显示步骤，“切换转换功能”按钮更改转换功能。

我认为“makeTransformTR”功能在步骤 1-2 中按预期工作；“makeTransformRT”不适用于步骤 1-2；“makeTransformByMatrix”不起作用但很有希望。

那么您知道如何修复转换函数以正确执行所有步骤吗？请帮忙！

这个小提琴：https ://jsfiddle.net/1tq8gkha/1/显示了问题

如果在 Chrome 或 Firefox 中查看，则 V 形标记会正确旋转到右侧。在 Edge 中，未应用变换，它指向下方。

我已经看到一些关于 Edge 不应用 CSS 变换的参考，但所有其他参考都表明在元素上使用变换确实在 Edge 中有效。

这有什么诀窍，还是 Edge 不支持它？

我正在尝试为我的汉堡菜单设置一点 SVG，但我有一个奇怪的问题，使用transform-origin: center center.

我做了一个小小提琴来演示： https ://jsfiddle.net/mnicolas/8sdyg0ea/13/

有谁知道为什么会发生这种情况以及如何解决它？

坦克很多！

我的 Bootstrap 4 手风琴卡的每个标题中都有一个 svg 箭头图像。我希望我打开的标头的箭头在打开时旋转 180 度，并在我关闭它或打开另一个标头时切换回其初始状态。现在箭头仅在我按住单击时旋转，然后在我释放鼠标时立即返回初始状态。有什么帮助吗？

CSS

HTML

Javascript

我正在尝试将 SVG 图像转换为 jpeg 或 png（质量无关紧要）

我正在使用一个名为SVG的 NuGet 包。

这是我的vb代码

出错的地方是：文本的背景变黑了。当我在浏览器中查看它们时，情况并非如此。

已删除

这是SVG的原始文件

[已删除][3]

我不确定到底出了什么问题，谢谢您的时间。

我正在尝试以通用方式生成一个编码为 SVG 的任务时间线，并设法做到这一点：

https://jsfiddle.net/dx7uryob/

剩下要做的是以下动画（在任何任务点上）：

从：

：

将“任务”标签旋转 90 度，直到完全水平显示并居中于任务点上方。我设法通过添加rotate(90, x+45, y) 到transform相应标签的属性中来做到这一点<text>，但是当我使用svg text { transition: transform 1s; }.

我真的很想知道如何制作动画（也在 IE 中工作，所以我想animateTransform这不是一个选项..？）。

然后，最后一步是在旋转的“任务”标签下方混合第二个标签，理想情况下，将不透明度设置为 1 以逐渐使其出现/消失。为此，我什至不知道如何在 SVG 中将第二个文本标签放置在第一个文本标签下方。

关于解决方案；我真的更喜欢坚持使用 SVG，因为我在片段中复制的解决方案可以以通用方式生成，然后随意缩放；只是这最后两块丢失了，我找不到它们。

我在这里使用画布可能会更好吗？我没有这方面的经验，但我想知道这是否是我想做的更好的选择..

为什么这个在 FF 和 Chrome 中有效的动画在 Safari 中无效（begin="click"不会触发 Safari 中的 animateTransform；替换click为例如 0，您会看到它被触发）？

仅在添加以下 js 时：

动画可以打开和关闭一次，但又会失败。根据规范，Safari 应该支持 animateTransform （我想我会放弃使用 fakesmile 来做到这一点，所以忘记 IE ..）。

关于如何让 Safari 以与 Chrome + FF 相同的方式工作的任何想法？

更新

越来越近，但仍然不完美（多次单击矩形，您会发现它远未优化）.....：小提琴

编辑对应于添加此脚本：

最好使用在动画结束时触发的事件，然后暂停动画。有这样的事吗？我会继续挖掘...

背景

我喜欢 SVG2 中扩展的 CSS 支持。不必一遍又一遍地重写属性真是太好了。所以我一直在将项目中的一些代码从 SVG 属性转换为 CSS。其中大部分工作都很好。

当涉及到转换时，如果您对 CSS 转换在 HTML 中的工作方式感到满意，那么事情看起来会很棘手。（对于转换尤其如此rotate()，这是这个问题的重点。）这是因为 SVG 没有 HTML 所具备的“自动流程”。

换句话说，当你有一堆 HTML 元素，一个接一个，它们会自动按照盒子模型进行布局。

SVG 中没有这样的“自动”或“默认”布局。因此，SVG 转换默认是从原点计算的。（这是0,0在用户坐标中）。

几乎完美的解决方案

对于大多数元素，有一个简单的解决方案：很棒的 CSS 属性transform-box。在大多数情况下，使用以下 CSS 将允许您以与 HTML 元素几乎相同的方式转换 SVG 元素：

现在，您可以执行类似...

它将围绕transform-originCSS 中指定的旋转。由于上面的示例使用 a transform-originof center center，因此它在原地旋转。

这与使用transform: rotate(…). 而且——特别是如果 SVG 图像中有很多这样的旋转——它比等效的 SVG 标记要好得多。

为什么 CSS 比等效的 SVG 标记更好？

因为SVG 的rotate()函数语法略有不同，没有与transform-box: fill-box上面使用的 CSS 等效的语法，除非您为每次旋转指定 X 和 Y 坐标。

这意味着您必须每次都输入旋转点，如下所示：

问题

我遇到的问题是CSS 解决方案不适用于<use />元素。

原因很清楚：<use />元素将引用的元素克隆到新位置。因此，就 CSS 而言，它正在转换<use />元素，而不是克隆的 (Shadow-DOM) 内容。

当涉及到将 CSS 应用于其他挑战时<use />——例如设置不同的配色方案——有一些解决方案（比如来自 SVG 超级英雄 S​​ara Soueidan的解决方案）。

但是当谈到解决坐标问题时，我还没有找到解决方法。

示例代码

编辑：为了更明确地说明我的目标，这里有一些示例代码。

（感谢@PaulLeBeau 推动包含这段代码。）

有没有人有办法解决吗？

（即使是一个变通的解决方案——只要它比transform在每个上指定 SVG 属性所涉及的重复更少<use />——也会受到欢迎！）

世博会弹出后我有这个问题

无法识别的字体系列“ProximaNova-Bold”

Metro.config.js：

这个 cmd 没有解决问题：

PS：我试过https://github.com/expo/expo/issues/11333