Question 277428 in CSS Question posted in
Some basic documentation can be found here.

Css – When using SVG to create gradient text with a vertical-rl writing mode, the text displays abnormally

I am trying to create vertically oriented text with a right-to-left gradient using the code below. However, the text is being displayed incorrectly.

text {
  writing-mode: vertical-rl;
  font-size: 50px;
  font-weight: bold;
}
<svg width="500" height="500">
  <defs>
    <linearGradient id="grad-md" x1="100%" y1="0%" x2="0%" y2="0%">
      <stop offset="0%" style="stop-color:#374151; stop-opacity:1"></stop>
      <stop offset="55%" style="stop-color:#374151; stop-opacity:1"></stop>
      <stop offset="100%" style="stop-color:#fff; stop-opacity:0"></stop>
    </linearGradient>
  </defs>
  <text x="50" y="50" fill="url(#grad-md)">测试文本123</text>
</svg>

As you can see, the initial few Chinese characters are not displaying correctly, and the direction of the gradient for Chinese text is incorrect.

Tags:

2

Answers


  1. 0

    There are two points you need to focus on achieve your result:

    • Adjust linear-gradient to make it work vertically.
    • Apply writing-mode directly to text.
    text {
  font-size: 50px;
  font-weight: bold;
}
    <svg width="500" height="500">
    <defs>
        <linearGradient id="grad-md" x1="0%" y1="100%" x2="0%" y2="0%">
            <stop offset="0%" style="stop-color:#374151; stop-opacity:1"></stop>
            <stop offset="55%" style="stop-color:#374151; stop-opacity:1"></stop>
            <stop offset="100%" style="stop-color:#fff; stop-opacity:0"></stop>
        </linearGradient>
    </defs>
    <text x="50" y="50" fill="url(#grad-md)" writing-mode="vertical-rl">测试文本123</text>
</svg>
    Login or Signup to reply.
  2. 0

    By default text-origination is mixed, which applys differently for different languages. That causes the gradient calculation using different coordinating systems (according to Robert. This is a known bug on Chrome). You can force them to use either upright or sideways to uniform the calculation (but that means your Chinese will be sideways as well):

    text {
  writing-mode: vertical-rl;
  font-size: 50px;
  font-weight: bold;
  text-orientation: sideways;
}
    <svg width="500" height="500">
    <defs>
        <linearGradient id="grad-md" x1="100%" y1="0%" x2="0%" y2="0%">
            <stop offset="0%" style="stop-color:#374151; stop-opacity:1"></stop>
            <stop offset="55%" style="stop-color:#374151; stop-opacity:1"></stop>
            <stop offset="100%" style="stop-color:#fff; stop-opacity:0"></stop>
        </linearGradient>
    </defs>
    <text x="50" y="50" fill="url(#grad-md)">测试文本123</text>
</svg>

    However if you just want to apply some gradient to a text, a non-SVG solution might be a better choice:

    span {
  background-image: linear-gradient(to right, red, blue);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 50px;
  writing-mode: vertical-lr;
  color: transparent;
  font-weight: bold;
  white-space: nowrap;
}
    <span>测试文本123</span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search