相关疑难解决方法(0)

我有一个最初在Inkscape中创建的免费剪贴画SVG文件,我正在修改它以用于Windows 8 JavaScript游戏.它包含许多路径实例,并在周围的组上应用矩阵变换,如下所示:

<g transform="matrix(0.443,0.896,-0.896,0.443,589.739,-373.223)">
    <path d="M486,313s27-9,43-29l26,4,1,23-22,5s-25-6-48-3z" />
</g>

我希望通过将它预先应用到Inkscape中的路径来展平该转换,以减少动画期间的浏览器工作.然而,当我将6个矩阵值插入Inkscape中的ABCDEF参数并应用它时,它为路径提供了完全不同的旋转和缩放到IE10引擎的功能.

我已经多次检查过我正确映射了6个值.我究竟做错了什么？

编辑:好的,这里是IE10和Inkscape的截图之前和之后.对于IE10的情况,SVG直接驻留在一个空的HTML文档的主体内(Firefox中的渲染完全相同).在Inkscape中,我只是打开了"之前"SVG文件,该文件只包含路径元素,选择了路径,并将6个矩阵变换值插入到Object> Transform> Matrix中.我对矩阵知之甚少,我只是希望能够以与浏览器相同的方式预先应用这些转换,并且理想地理解为什么Inkscape存在差异.谢谢.

鉴于以下SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1891px" height="1492px" viewBox="0 0 1891 1492" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g transform="translate(352 500)">
        <path d="M1,0 L1,400 C0.999999169,799.99998 201,1205 601,1439.4375 C1001,1205 1201,800 1201,400 L1201,0 L1,0 Z M1,0"></path>
        <path d="M1,0 L1,960.824531 C1.00000084,1439.4375 489.311066,1258.28207 600.483175,1439.4375 C708.904794,1258.28211 1201,1439.4375 1200.99997,960.824531 C1200.99996,960.824531 1201,0 1201,0 L1,0 Z M1,0"></path>
    </g>
</svg>

是否有任何工具可以使用变换自动更新路径点,并从组元素中删除变换？

我有一个SVG应用程序(草图),使用转换属性输出SVG(如果您对路径进行任何调整),但在我的Web应用程序中,我需要实际的路径点已经调整,而不是使用任何转换属性.

澄清:目标是找到一个允许在大型SVG文件上执行此操作的应用程序或工具,从而删除整个文件中的任何转换属性.

谢谢!

我正在寻找一种可能快速的方法来应用给定svg-graphic的所有变换矩阵.换句话说:算法应该删除所有"变换"属性,并将图形的所有坐标变换为绝对坐标.

他们的任何库可以做到这一点,还是他们的任何SVGDomInterface方法都可以做到这一点？

编辑::

如果我像这样调用整合方法:

$.each( svg.find( 'path' ), function( i ){
        this.transform.baseVal.consolidate();
});

没有任何反应,如果我这样称呼它:

$.each( svg.find( 'path' ), function( i ){
        this.transform.animVal.consolidate();
});

我收到此错误:

那么,我应该如何使用"合并"方法,我应该在哪个元素上调用它？

问候菲律宾

我有一个与此类似的问题。也就是说，我有一个由 Inkscape 创建的 SVG 文件，并且在我想要摆脱的路径上有额外的转换。

现在不再有变换矩阵，而是有不同类型的变换。例如，标题是这样的：

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.0"
   width="32"
   height="32"
   viewBox="0 0 16.146082 22.465583"
   id="svg2"
   xml:space="preserve"
   ...
</svg>

显然，这种混乱被解释为某种平移和缩放。如果我删除该viewBox属性，路径会缩小并显示在左侧一点。因此，如果我只是复制路径定义，我的图像不是 32 x 32，而是更小。

如何展平以某种方式引入的变换，viewBox以便将其集成到显式路径坐标中？

如果我使用初始大小[w1,h1]创建一个Raphael.js对象的图像,然后使用该transform()方法缩放它,我将如何检索它的新大小[w2,h2]？因为调用image.attr("width")返回w1,初始宽度,而不是转换后的宽度.

我知道你可能会说我应该简单地将w1和h1与缩放因子相乘,但是大多数时候,也会应用旋转变换,这会让事情变得更加麻烦.

简而言之,Raphael.js中是否有一个方法可以检索对象的正确大小,而不管可能应用于它的任何转换？