Сделать текст внутри SVG по центру, используя scss

Question

Я пытаюсь поместить свой текст по центру в треугольник, я пытался сделать позицию абсолютной, а затем top: 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/

Вы также можете установить alignment-baseline и text-anchor с помощью scss.

Looksкруто кстати!