使用任意函数（x，y）->（x'（x，y），y'（x，y））变换SVG图像的最简单方法是什么？

Question

以以下方式转换SVG图像的（x，y）坐标的最简单方法是什么：

x --> x'(x,y)
y --> y'(x,y)

示例：

x --> x^2+y^2
y --> sinx + cosy

该方法可以修改原始SVG文件或生成包含修改后的SVG图像的新SVG文件。

Answer 1

请记住，SVG包含以下功能：

• translate（）
• rotate（）
• scale（）
• skew（）
• matrix（）

我最初以为您可以使用SVG系统可用的矩阵转换功能。因为那个矩阵是静态的，所以我不能肯定你会得到你想要的。在很大程度上取决于变换矩阵的外观。

这里是样本jsfiddle。

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <image x="20" y="20" width="300" height="250" xlink:href="https://upload.wikimedia.org/wikipedia/commons/0/0c/Cow_female_black_white.jpg" />
</svg>

<h2>A skew transformation along the y-axis</h2>

<svg version="1.1" baseProfile="full" width="300" height="400" xmlns="http://www.w3.org/2000/svg">
    <image x="20" y="20" width="300" height="250" xlink:href="https://upload.wikimedia.org/wikipedia/commons/0/0c/Cow_female_black_white.jpg" 
    transform="matrix(1,.5,0,1,0,0)" />
</svg>

您是否已查看D3.js库中的投影内容？ D3使用SVG元素，并且它们具有一些非常好的工具。我看到人们也为此编写了其他工具。你看过geo projections project for D3 at Github吗？我确实在那里看到d3.geo.equirectangular选项。也许那会让您很快喝啤酒？

我确实知道您可以使用Canvas做更多的事情。您必须将SVG图像转换为Canvas，但这是可行的。检出此awesome tutorial以在画布中动态旋转图像。