【发布时间】：2012-10-06 19:55:38
【问题描述】：
如何在浏览器中扭曲 SVG 中的路径，以便使用可能的 javascript 或 css 将它们扭曲到某些角度？透视扭曲可以在 Photoshop、Illustrator 等中轻松制作，但是浏览器呢？
这是源路径：
这是改造后的路径：
【问题讨论】：
标签： javascript css svg transformation perspective
【发布时间】：2012-10-06 19:55:38
【问题描述】：
这是我的拖动扭曲提案 (share you knowledge, Q&A-style)。
现场示例在http://jsfiddle.net/xjHUk/278/，主要代码如下：
（仅输出窗口：http://jsfiddle.net/xjHUk/279/embedded/result/）
结果被正确地扭曲为透视图（两个消失点一）。两点透视计算的原理是here。如果满足以下要求，该脚本可以处理 SVG 路径数据：
- 所有坐标都是绝对坐标（即大写字母）。见this。
- 未使用圆弧（“A”）
- V 和 H 归一化为 L
弧可以被规范化，但我还没有找到任何跨浏览器的方式。 V 和 H 到 L 是简单的任务，你必须得到最后使用的 x 或 y 坐标，并在 L 之后添加缺少的一个。
相同的脚本也可以处理路径中的曲线（曲线来自时代）。以下是完全相同的代码，但路径属性（“d”）不同：
http://jsfiddle.net/xjHUk/277/function dummy(a) {return a;}
（此代码没有检查无效位置，如上）。
以上示例的路径来自于 Arial 和 Times 的 SVG 版本。请注意字体使用Cartesian coordinate system，向上时y坐标增加。否则 SVG 使用极坐标系，用于位图图像和 css。这意味着当在上述代码中使用来自 SVG 字体的路径时，路径必须垂直翻转并缩放到所需的字体大小。 TTF 字体（及其对应的 SVG 字体）通常 em 大小为 2048，因此字形的边界框没有缩放 2048 px，这在 SVG 字形路径转换为 SVG 路径时通常太大了。
但如果您想扭曲其他 SVG 路径，则无需进行翻转和缩放。
这是相当长的代码（很大程度上是因为拖动功能），但我认为同样的效果也可以通过一些 css-3D-transform-way 实现，但在这样的实现中还没有运气......
为了比较一个非透视扭曲的例子（SVG的主要竞争对手SWF）：
http://www.rubenswieringa.com/code/as3/flex/DistortImage/
还有一个 VALID 透视计算示例：
http://zehfernando.com/f/TriangleTest.swf
【讨论】：
-
是否可以使用 SVG 中的图像进行四角变形？我想展示一些观点 - 想象一张折叠的贺卡。
-
抱歉回答迟了，但现在找到了一个库，虽然它从 2013 年就已经存在了。该技术使用转换属性。这种技术的好处是它可以转换任何 DOM 元素，而不仅仅是我建议的 svg 路径。不好的是质量不是很好，在矢量形状中有些像素化，但在使用位图图像时还可以。我举了一个例子：jsbin.com/xuxataqahe。该库来自edankwan.github.io/PerspectiveTransform.js。该库可能也适用于 SVG 图像，但尚未对其进行测试。
-
这很棒。修改这个求解器来计算包络线是曲线的失真会不会很困难，就像this example 中那样？
-
我们可以管理仅 SVG 的解决方案吗？我不明白为什么 SVG 转换不只是采用完整的 3x3 矩阵，因为将应用于 3 向量被用作 2 点的同质表示。这将允许简单的投影变换。这让我很烦恼，这是我的烦恼带给我的地方之一。
-
是否可以在没有 Javascript 的情况下做到这一点？仅在 SVG 中使用声明式样式？
所选答案已过时。
尽管 SVG 不支持改变元素的视角，但可以通过使用 CSS3 变换来实现。
CSS3 是一种非常强大的动画对象方法。可以使用 Javascript 实时创建和应用 CSS3 变换。
对 CSS3 Transform 有很好的支持，所有最新版本的主要浏览器都支持它。 （IE 8+、Chrome 31+、Safari 7.1+、Opera 26+、Firefox 34+、Android 浏览器 4.1+）。更多信息：http://caniuse.com/#feat=transforms2d
对于某些浏览器版本，您需要使用特定于浏览器的前缀来创建转换。但是，有一个非常简洁的网站解释了处理该问题的好方法： http://bl.ocks.org/mbostock/10571478
一些 CSS3 转换属性是：rotate(angle)、scale(dimension)。我知道，它们看起来与 SVG 变换 rotate(angle)、scale(x y) 非常相似，但最好不要把它们等同起来，因为两者之间存在根本差异，CSS3 比 SVG 变换强大得多。此外，CSS3 Transforms 有一个属性perspective，你肯定需要看看。
没有比 W3 更好的地方可以找到有关 CSS3 转换的更多信息：http://www.w3.org/TR/css3-transforms/
这是一个代码sn-p：
div {
height: 150px;
width: 150px;
}
.container {
perspective: 500px;
border: 1px solid black;
background: gray;
}
.transformed {
transform: rotateY(50deg);
background: blue;
}<!doctype html>
<html>
<body>
<div class="container">
<div class="transformed"> Hola! He sido transformado!</div>
</div>
</body>
</html>变身快乐！
【讨论】：
-
如何在您的方法中进行四角拖动？这是我 QA 的重点。
-
@timo 是的，您可以通过 javascript 控制透视图。这将是一些非常复杂的编码，可能需要我几天时间才能弄清楚。但理论上是可以做到的。
-
@AeroWindwalker：您的意思是通过使用 javascript 控制 css 变换属性值（matrix3D、translate3D、rotate3D、scale3D、transform-origin、perspective、perspective-origin 等）来拖动四个角？首先，您知道四个角的源点和目标点，然后尝试为这些 css 属性计算正确的值？
-
正确，但老实说，如果您有权访问 SVG 文件，则可以将属性添加到文件中，使其可拉伸（可能让用户上传文件或将它们镜像到远程 url） - 在在这种情况下你的生活会更轻松。
-
@user2070775 虽然 SVG 支持大多数 CSS3，但 SVG 渲染器始终会忽略透视/3d 变换（如您在示例中显示的变换）。