使用ARBITRARY函数（x，y） - >（x'（x，y），y'（x，y））来转换SVG图像的最简单方法

什么是最简单的方法来转换（x，以下列方式SVG图像的y）坐标：使用ARBITRARY函数（x，y） - >（x'（x，y），y'（x，y））来转换SVG图像的最简单方法

X - > X '（X，Y）

ý - > Y'（X，Y）

实施例：

x - > x^2 + y^2

y - > sinx + cozy

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

来源

2015-11-13 The Riddler

（翻译）（旋转）矩阵变换？ “最简单的方法”是什么意思？程序员快速完成并喝啤酒的最简单方法是什么？ CPU处理转换最简单的方法是什么？好像你在问一个意见。你有什么尝试？（我假设你正在编写一个游戏/其他动画，并在屏幕上移动一个svg对象等等......这是否正确？） – zipzit

“程序员快速完成并喝啤酒的最简单方法？”是。（我假设你正在编写一个游戏/其他动画，并在屏幕上移动一个svg对象，等等......这是否正确？）不，实际上我正在尝试将SVG地图投影从正弦曲线更改为Equirectangular。 –

对不起，这听起来像是一项家庭作业。如果是我，我会从这里开始... http：//www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/geometry/geo-tran.html，然后为您找到一个不错的矩阵库选择的语言。 – zipzit

记住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动态旋转图像，在画布上。

来源

2015-11-13 01:59:57 zipzit

那么有没有什么方法可以用Canvas与SVG进行那种转换？我不认为D3是我正在寻找的，因为我想要的功能是任意的，而不是预先设定的。 –

当然。上面列出的D3插件是开源的，所有代码都在github中。看看代码，找出它的工作原理，并将其移动。首先，我会尝试使用您选择的变换矩阵，看看您是否可以让它们工作。请记住，我没有在jsfiddle演示文稿中看到您的原始开始代码。你没有很好地解释你想要转换的东西。转换是否完成了一次，然后显示，或者是一个动态转换，就像我上面链接的画布教程一样？ – zipzit

使用ARBITRARY函数（x，y） - >（x'（x，y），y'（x，y））来转换SVG图像的最简单方法

回答

相关问题