Question

我想在类样式中包含定位x="50%" y="50%"。这样做不工作：

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

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

修改

根据答案，translate()应该完成这项工作，实际上以下代码段显示了它的工作原理。也就是说，如果你没有使用Safari。

Safari似乎不喜欢在text元素上执行此操作...？

＆＃13;

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%);
}

＆＃13;

<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>

＆＃13;

Answer 1

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

您可以阅读更多here

Answer 2

显然，是的，你可以。如果您使用transform css属性。请参阅附带的代码段。

＆＃13;

svg {
  border: 1px solid;
}

rect {
  fill: red;
  transform: translate(50%, 50%);
}

＆＃13;

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

＆＃13;

Answer 3

您可以使用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）：

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

3 个答案: