Question

我想要使用SVG的文本路径实现的是在动画路径之后不旋转的文本;因此它在动画时保持水平，如下所示：

事情是文本在默认设置动画时旋转到当前路径角度，使文本看起来像这样：

如何在保持文本水平的同时使用SVG的文本路径为文本设置动画？

编辑：这里要求的是我用于水平文本的代码;我实际上无法实现动画：

<svg>
    <path id="myPath2" fill="none" stroke="#FFFFFF" stroke-miterlimit="10"
    d="M91.4,344.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3
c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5"/>
<text fill="red">
    <textpath xlink:href="#myPath2" >
    PUMCHY PUMCHY PUMCHY PUMCHY!
    <animate attributeName="startOffset" from="100%" to ="-100%" begin="0s" 
    dur="10s" repeatCount="indefinite" keyTimes="0;1" calcMode="spline" keySplines="0 0 1 1"/>
    </textpath>
</text>
</svg>

我得到此代码的来源是来自这个帖子; horizontal text on path，它实际上帮助我实现了将文本保持水平在路径上，而不是在尝试使用SVG的文本路径设置动画时;尝试时，显示的文字保持在x =“0”y =“0”而不移动。

与通过其路径移动时旋转角度的方法不同;那个实际上按照预期动画，这里也是它的代码：

import java.util.*;
import java.io.*;
public class ConcreteClass
{
    private String fileName = "List.txt";
    private Customer[] clients = null;

    public static void main(String[] args) throws Exception
    {

        ConcreteClass first = new ConcreteClass();


        first.readFile();
        first.showCustomers();


        System.out.println("Hello World");

    }

    public void showIntro()
    {
        System.out.println("---------BANKING MANAGEMENT PROGRAM---------");
        System.out.println("1---Show list of customers.");
        System.out.println("2---Add a Customer bank account ");
        System.out.println("3---Remove a Customer bank account ");
        System.out.println("4---Sort customer list according to name");
        System.out.println("5---Sort customer list according to account balance");
    }

    public void readFile() throws Exception
    {   
        int index = 0;
        Scanner reader = new Scanner(new File(fileName));

        int count=0;

        while(reader.hasNextLine())
        {
            count++;
        }


        while(reader.hasNextLine())
        {
            String[] roster = reader.nextLine().split(",");

            String fName = roster[0];
            String lName = roster[1];
            String mName = roster[2];
            double balance = Double.parseDouble(roster[3]);
            String accNo = roster[4];

            Account b = new Account(balance,accNo);
            Customer c = new Customer(fName,lName,mName,b);

            clients = new Customer[count];
            clients[index++] = c;
        }

        reader.close();

    }

    public void showCustomers()
    {
        for(int i =0; i<clients.length; i++)
        {
            System.out.println(clients[i].toString());
        }
    }



}

Answer 1

无法将字符与<textPath>保持垂直。但是如果使用动作路径（即<animateMotion>），则可以这样做。

然而，这有点痛苦，因为你必须单独为每个角色制作动画。

<svg width="500px" height="500px">

    <path id="myPath2" fill="none" stroke="lightgrey" stroke-miterlimit="10"
    d="M91.4,344.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3
c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5"/>

  <text fill="red" text-anchor="middle">!
    <animateMotion dur="6s" repeatCount="indefinite">
      <mpath xlink:href="#myPath2"/>
    </animateMotion>
  </text>

  <text fill="red" text-anchor="middle">Y
    <animateMotion dur="6s" repeatCount="indefinite" begin="0.2s">
      <mpath xlink:href="#myPath2"/>
    </animateMotion>
  </text>

  <text fill="red" text-anchor="middle">H
    <animateMotion dur="6s" repeatCount="indefinite" begin="0.4s">
      <mpath xlink:href="#myPath2"/>
    </animateMotion>
  </text>

  <text fill="red" text-anchor="middle">C
    <animateMotion dur="6s" repeatCount="indefinite" begin="0.6s">
      <mpath xlink:href="#myPath2"/>
    </animateMotion>
  </text>

  <text fill="red" text-anchor="middle">N
    <animateMotion dur="6s" repeatCount="indefinite" begin="0.8s">
      <mpath xlink:href="#myPath2"/>
    </animateMotion>
  </text>

  <text fill="red" text-anchor="middle">U
    <animateMotion dur="6s" repeatCount="indefinite" begin="1.0s">
      <mpath xlink:href="#myPath2"/>
    </animateMotion>
  </text>

  <text fill="red" text-anchor="middle">P
    <animateMotion dur="6s" repeatCount="indefinite" begin="1.2s">
      <mpath xlink:href="#myPath2"/>
    </animateMotion>
  </text>
</svg>

如何在使用SVG的文本路径时为文本设置动画以使其不旋转？

1 个答案: