从xml更改svg元素位置 我有一些SVG图标,我放在我的网页中的SVG圈的中间。 我对所有图像使用相同的javascript函数和快照,但只有一个图像没有正确居中
我试图将svg直接放在html中进行测试(请参见),但正如您所注意到的,球被正确放置,而不是人,人也应该位于左上角(比如,球的下方…) 据我所知,SVG的位置可以通过从xml更改svg元素位置 我有一些SVG图标,我放在我的网页中的SVG圈的中间。 我对所有图像使用相同的javascript函数和快照,但只有一个图像没有正确居中,javascript,svg,adobe-illustrator,snap.svg,inkscape,Javascript,Svg,Adobe Illustrator,Snap.svg,Inkscape,我试图将svg直接放在html中进行测试(请参见),但正如您所注意到的,球被正确放置,而不是人,人也应该位于左上角(比如,球的下方…) 据我所知,SVG的位置可以通过transformattribute更改,也可以直接在路径中更改(相对或绝对路径点)。我的图标没有transform属性,因此我认为只能是路径点对其进行了不同的定位 谁能告诉我我是不是对的 如果是,我可以在SVG的xml中更改什么以将其设置为 左上角位置(请不要变换) 如果没有,有什么问题 以下是我的SVG: <g sty
transform
attribute更改,也可以直接在路径中更改(相对或绝对路径点)。我的图标没有transform
属性,因此我认为只能是路径点对其进行了不同的定位
谁能告诉我我是不是对的
- 如果是,我可以在SVG的xml中更改什么以将其设置为
左上角位置(请不要变换
)
- 如果没有,有什么问题
<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>
注意:我试过了,但没有改变任何事情 我找到的最佳解决方案是使用inkscape,如以下线程中所回答的: 下面是答案中建议的步骤的副本/过去: 删除Inkscape中的变换
Edit>XML编辑器
变换属性并删除它们
Object>解组
Edit>selectall-in-All-Layers
Object>Transform
相对移动
并选中分别应用于每个对象
水平
和垂直
值,然后单击应用
我找到的最佳解决方案是使用inkscape,如以下线程中所回答的: 下面是答案中建议的步骤的副本/过去: 删除Inkscape中的变换
Edit>XML编辑器
变换属性并删除它们
Object>解组
Edit>selectall-in-All-Layers
Object>Transform
相对移动
并选中分别应用于每个对象
水平
和垂直
值,然后单击应用
你说得对。为什么不进行转换(因为这是显而易见的解决方案)?要么放置变换,要么变换所有点并再次保存。选择是你的:)。你的观点就是定义位置的东西,下面是一个例子translate@Ian
transform
对我来说不合适,因为我使用Snap.svg
方法element.getBBox()
来计算对象的位置,然后使用捕捉矩阵来缩放/平移它。正如我所尝试的,在缩放后,变换的位置是错误的…:(您仍然可以在外部g或其他位置放置变换。如果需要,您也可以将相同的变换应用于边界框。这取决于您的意思是什么导致了问题。如果有帮助,您还可以使用任何路径字符串进行变换。您是对的。为什么不进行变换(因为这是显而易见的解决方案)?您必须放置一个变换,或者变换所有点并再次保存它。选择权在您:)。您的点就是定义位置的内容,下面是一个示例translate@Iantransform
对我来说不合适,因为我使用Snap.svg
方法element.getBBox()
计算对象的位置,然后使用捕捉矩阵来缩放/平移对象。正如我所尝试的,在缩放后,变换的位置是错误的…:(您仍然可以在外部g或其他位置放置变换。如果需要,您也可以将相同的变换应用于边界框。这取决于您的意思是什么导致了问题。如果有帮助,您还可以使用转换任何路径字符串。