SVG：我可以在样式中的属性中放置x和y位置吗？
问题描述：
我想在课堂风格中加入定位x="50%" y="50%"。这样做并没有工作：SVG：我可以在样式中的属性中放置x和y位置吗？
.centre {
x: 50%;
y: 50%;
}
有没有什么办法，包括在风格定位？
编辑：
基于答案，translate()应该做的工作，乃至下面的代码片段显示了它的工作。也就是说，如果你不使用Safari。
Safari似乎不喜欢在text元素上做这个...？
text.centre {
\t font-family: sans-serif;
\t font-size: .5em;
\t fill: green;
\t alignment-baseline: middle;
\t text-anchor:middle;
\t -webkit-transform: translate(50%,50%);
\t transform: translate(50%,50%);
}<svg x="160" y="100" width="140" height="40">
\t <rect style="fill: lightgrey;" x="0" y="0" width="140" height="100"/>
\t <rect style="fill: white;" y="10" x="10" width="120" height="20"/>
\t <svg x="10" y="10" width="120" height="20">
\t \t <text class="centre">Hello</text>
\t </svg>
</svg>
答
您可以使用transform: translate(50%, 50%)第一是x的第二个为y。如果您需要移动只沿一个轴或其他可以使用translateX(x)或translateY(y)
你可以阅读更多here
答
显然，是的，可以。如果您使用transform css属性。请参阅附件中的片段。
svg {
border: 1px solid;
}
rect {
fill: red;
transform: translate(50%, 50%);
}<svg height="200" width="200">
<rect height="100" width="100"></rect>
</svg>
答
可以操纵与变换路径的定位：翻译（）;
所以尽量用
.centre{
transform:translate(50%, 50%);
}
操纵你想要的路径也许你会想用一些供应商前缀为跨浏览器
.centre{
-webkit-transform:translate(50%, 50%);
-ms-transform:translate(50%, 50%);
transform:translate(50%, 50%);
}
我用这个动画这里的标志部分：http://fire.netzgestaltung.at
特定的SVG CSS属性：https://www.w3.org/TR/SVG/styling.html
更多教程（换货的动画，但使用CSS）：
必须找到我的被测试iphone装电缆... –
Safari浏览器是新的IE。对于引用这个问题的其他人来说：％in translate指的是元素大小的百分比，其中x/y在％中指的是viewbox尺寸，％in left/top（css）指的是父元素尺寸 – Apolo