css - SVG:我可以在样式的属性中放置 x 和 y 位置吗？

Question

我想在类样式中包含定位 x="50%"y="50%"。这样做不有效:

.centre {
    x: 50%;
    y: 50%;
}

有没有办法在样式中包含定位？

编辑:

根据答案，translate() 应该可以完成这项工作，事实上，以下代码段显示它可以正常工作。也就是说，如果您不使用 Safari。

Safari 似乎不喜欢在 text 元素上这样做……？

text.centre {
	font-family: sans-serif;
	font-size: .5em;
	fill: green;
	alignment-baseline: middle;
	text-anchor:middle;
	-webkit-transform: translate(50%,50%);
	transform: translate(50%,50%);
}

<svg x="160" y="100" width="140" height="40">
	<rect style="fill: lightgrey;" x="0" y="0" width="140" height="100"/>
	<rect style="fill: white;" y="10" x="10" width="120" height="20"/>
	<svg x="10" y="10" width="120" height="20">
		<text class="centre">Hello</text>
	</svg>
</svg>

Answer 1

显然，是的，你可以。如果您使用 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>