Как исправить артефакты текста в svg?

Question

[pdibbert]

Здравствуйте, етот код создает svg-кнопки

<svg class="block__submit">
        <linearGradient id="linear-gradient1">
          <stop offset="0%" stop-color="#9c83aa" class="stop-start" />
          <stop offset="100%" stop-color="#9c83aa" class="stop-end" />
          <rect fill="url(#linear-gradient)" width="100%" height="100%" />
        </linearGradient>
        <rect fill="url(#linear-gradient1)" width="100%" height="100%" />
        <text
          y="50%"
          x="50%"
          text-anchor="middle"
          dominant-baseline="central"
          text-rendering="geometricPrecision"
        >
         SELECT
        </text>
      </svg>
<style>
.block__submit {
      transition: all 5s ease;
      height: 4vmin;
      width: 100%;
      margin-top: auto;

      border-radius: 2vmin;
      display: flex;
      justify-content: center;
      align-items: center;

      color: white;
      font-size: 2vmin;
      font-weight: 400;
}
      text {
        font-size: 2vmin;
        font-family: sans-serif;
        font-weight: 400;
      }
    }

но возникает какойто артефакт цветов (1px вокруг текста красный, ето не приисходит при текстве вне svg, и е очень похоже на сглажывание)

Comments

[Fenix957]

Ваш код работает корректно
Проверил у себя таких артефактов нет

PS На будущее проверять текст авточекером на ошибки