SVG：我可以将 x 和 y 位置放在样式的属性中吗？答案

【问题标题】：SVG: Can I put x and y position in attributes in the style?SVG：我可以将 x 和 y 位置放在样式的属性中吗？
【发布时间】：2018-01-13 00:50:01
【问题描述】：

我想在课堂风格中加入x="50%" y="50%" 的定位。这样做不起作用：

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

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

编辑：

根据答案，translate() 应该可以完成这项工作，并且下面的 sn-p 确实显示了它的工作原理。也就是说，如果您不使用 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>

【问题讨论】：

必须找到我的测试iphone的加载电缆...
Safari 是新的 IE。对于任何其他提到这个问题的人：翻译中的百分比是指元素大小的百分比，其中 x/y 中的百分比是指视图框尺寸，左/顶部（css）中的百分比是指父元素尺寸

标签： css svg safari position styles

【解决方案1】：

您可以使用 transform:translate(); 来操纵路径的定位

所以尝试使用

来操纵你想要的路径

.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）：

【讨论】：

【解决方案2】：

显然，是的，你可以。如果您使用 transform css 属性。请参阅随附的 sn-p。

svg {
  border: 1px solid;
}

rect {
  fill: red;
  transform: translate(50%, 50%);
}

<svg height="200" width="200">
  <rect height="100" width="100"></rect>
</svg>

【讨论】：

【解决方案3】：

你可以使用transform: translate(50%, 50%)第一个是x，第二个是y。如果您只需要沿一个轴或另一个轴移动，您可以使用translateX(x) 或translateY(y)

您可以阅读更多here

【讨论】：