从其 xml 更改 svg 元素位置答案

【问题标题】：Changing svg element position from its xml从其 xml 更改 svg 元素位置
【发布时间】：2015-09-30 15:01:41
【问题描述】：

我有一些 SVG 图标放在我网页的 svg 圆圈中间。我对所有图像都使用与 Snap 相同的 javascript 函数，但只有一个没有正确居中...

我尝试将 svg 直接放在 html 中进行测试（请参阅 http://jsfiddle.net/aop5znab/），但您可以注意到，球放置正确，但人不正确，它也应该在左上角（例如，在球下方...）。

据我所知 SVG，可以使用 transform 属性或直接在路径（相对或绝对路径点）中更改位置。我的图标没有transform 属性，所以我认为它只能是定位不同的路径点。

谁能告诉我我是对的吗？

如果是，我可以在 SVG 的 xml 中进行哪些更改以将其设置为左上角（请不要transform）
如果不是，有什么问题？

这是我的 SVG：

<g style="fill:#808080">
    <g fill="#0ea507">
        <circle cx="75.042" cy="68.168999" r="4.3889999" fill="#0ea507" d="M 79.431,68.168999 C 79.431,70.592976 77.465978,72.557999 75.042,72.557999 72.618022,72.557999 70.653,70.592976 70.653,68.168999 70.653,65.745021 72.618022,63.779999 75.042,63.779999 77.465978,63.779999 79.431,65.745021 79.431,68.168999 z"/>
        <g fill="#0ea507">
            <g fill="#0ea507">
                <g fill="#0ea507">
                    <polyline
                        points="67.165,87.193 70.991,77.023 74.929,77.023"
                        fill="#0ea507" />
                    <path
                        d="M 67.165,89.22 C 66.928,89.22 66.687,89.178 66.451,89.089 65.404,88.695 64.875,87.527 65.269,86.48 L 69.096,76.31 C 69.393,75.521 70.148,74.998 70.992,74.998 H 74.93 C 76.049,74.998 76.956,75.905 76.956,77.024 76.956,78.143 76.049,79.049 74.93,79.049 H 72.393 L 69.06,87.907 C 68.755,88.719 67.984,89.22 67.165,89.22 z"
                        id="path3010"
                        fill="#0ea507" />
                </g>
                <g
                    fill="#0ea507">
                    <polyline
                        points="82.92,87.193 79.094,77.023 75.155,77.023"
                        fill="#0ea507" />
                    <path
                        d="M 82.92,89.22 C 82.101,89.22 81.329,88.719 81.024,87.907 L 77.691,79.049 H 75.154 C 74.035,79.049 73.129,78.142 73.129,77.024 73.129,75.905 74.036,74.998 75.154,74.998 H 79.093 C 79.936,74.998 80.692,75.521 80.989,76.31 L 84.815,86.48 C 85.209,87.527 84.68,88.695 83.633,89.089 83.399,89.177 83.158,89.22 82.92,89.22 z"
                        fill="#0ea507" />
                </g>
            </g>
            <path
                d="M 75.042,75.006 C 75.042,75.006 80.782,74.556 80.219,80.183 79.656,85.81 77.63,103.365 76.617,103.478 75.604,103.591 75.942,103.703 75.042,103.703 74.142,103.703 74.479,103.591 73.467,103.478 72.454,103.365 70.428,85.809 69.865,80.183 69.302,74.557 75.042,75.006 75.042,75.006 z"
                fill="#0ea507" />
            </g>    
        </g>
    </g>

注意：我尝试了this，但它并没有改变任何东西......

【问题讨论】：

你是对的。为什么不转换（因为那是明显的解决方案）？要么您必须放置一个变换，要么变换所有点并再次保存。选择是你的:)。
你的观点是定义位置，这里是 fiddle 使用翻译
@Ian transform 不适合我，因为我使用Snap.svg 方法element.getBBox() 来计算对象的位置，然后使用Snap Matrix 来缩放/平移它。正如我所尝试的，随着变换，缩放后的位置是错误的...... :(
您仍然可以在外部 g 或其他东西上进行转换。如有必要，您还可以对边界框应用相同的变换。这取决于你的意思是导致问题。如果有帮助，您还可以使用 snapsvg.io/docs/#Snap.path.map 转换任何路径字符串。

标签： javascript svg adobe-illustrator snap.svg inkscape

【解决方案1】：

我发现的最佳解决方案是使用inkscape，就像在这个线程中回答的那样：Removing transforms in SVG files

这是答案中提出的步骤的副本/过去：

删除 Inkscape 中的变换

在 Inkscape 中打开 svg 文件
转到Edit > XML Editor
在图层中找到transform属性并删除它们

如何在不创建其他变换属性的情况下完全移动所有对象

使用Object > Ungroup 取消组合所有已分组的元素
转到Edit > Select All in All Layers
转到Object > Transform

然后在变换面板中

取消选中Relative move并选中Apply to each object separately
根据需要设置Horizontal和Vertical值，点击Apply

【讨论】：