Question

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

x - ＆gt; X＆＃39;（X，Y）

y - ＆gt; ý＆＃39;（X，Y）

示例：

x - ＆gt;的x ^ 2 + Y ^ 2

y - ＆gt; sinx + cosy

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

Answer 1

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

翻译（）
旋转（）
规模（）
歪斜（）
矩阵（）

我最初认为你可以使用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以在画布中动态旋转图像。

使用ARBITRARY函数（x，y）转换SVG图像的最简单方法 - ＆gt; （X＆＃39;（X，Y）中，y＆＃39;（X，Y））

1 个答案: