Question

我试图将文本居中放置在三角形上，我试图使位置绝对，然后置顶：0；对：0;左：0;底部：0;没什么改变。

<svg class="intro go" viewbox="0 0 200 86">
  <text text-anchor="start" x="10" y="30" class="text text-stroke" clip-path="url(#text1)">TEST</text>
  <text text-anchor="start" x="10" y="30" class="text text-stroke text-stroke-2" clip-path="url(#text1)">TEST</text>
  <defs>
    <clipPath id="text1">
      <text text-anchor="start" x="10" y="30" class="text">TEST</text>
    </clipPath>
  </defs>
</svg>

这是我的代码：https://codepen.io/anon/pen/ePEdEZ

Answer 1

我不确定“以三角形为中心”是什么意思吗？

您是说以矩形为中心吗？如果是这样：

将文本的坐标从x="10" y="30"更改为x="100" y="43"。然后将text-anchor="start"设置为text-anchor="middle"。并将alignment-baseline="middle"添加到您的文本中。文本现在在框中居中。

这是一个JSFiddle：https://jsfiddle.net/1mLey8v4/

您还可以通过scss设置alignment-baseline和text-anchor。

看起来很酷！

使用scss使svg中的文本居中

1 个答案: