Инвертировать textPath букву сверху вниз по пути без перерисовки? - PullRequest
Новая
       50

Инвертировать textPath букву сверху вниз по пути без перерисовки?

1 голос
/ 16 апреля 2020

Я хочу изменить слово по сравнению со строкой без необходимости перерисовывать строку, как это сделать? Before After

/ Ps: когда я использую transform = "scale (-1,1)", это не работает, потому что путь к линии инвертировано.

Before After

Ответы [ 2 ]

2 голосов
/ 16 апреля 2020

Вы можете использовать <textPath side="..."> для этого. Однако сейчас Firefox поддерживает только . 

<svg viewBox="0 0 100 55" xmlns="http://www.w3.org/2000/svg">
    <path id="curve" fill="none" stroke="limegreen" stroke-width="1" d="M10,5 c20,60 50,50 80,10"></path>

    <text font-size="5" dy="-1">
        <textPath href="#curve" startOffset="6" side="left">Dangerous curves ahead</textPath>
    </text>
    <text font-size="5" dy="-1">
        <textPath href="#curve" startOffset="9" side="right">Dangerous curves ahead</textPath>
    </text>
</svg>
0 голосов
/ 16 апреля 2020

Если это то, что у вас есть: 

body{background:white;}
<svg width="250" height="200" viewBox="0 0 250 200">
<defs>
<path id="thePath" d="M55,100 a70,40 0 1 0 0,-1 z" stroke="#FF0000" fill="transparent" stroke-width="1" ></path>
</defs>
<use xlink:href="#thePath"></use>
   <text stroke="#000000" font-size="20">
      <textPath xlink:href="#thePath" startOffset="7%">
            Some text here
      </textPath>
    </text>
</svg>

Вы можете применить преобразование transform="scale(-1,1) translate(-250,0)" к пути следующим образом: 

body{background:white;}
<svg width="250" height="200" viewBox="0 0 250 200">
<defs>
<path id="thePath" d="M55,100 a70,40 0 1 0 0,-1 z" stroke="#FF0000" fill="transparent" stroke-width="1" transform="scale(-1,1) translate(-250,0)"></path>
</defs>
<use xlink:href="#thePath"></use>
   <text stroke="#000000" font-size="20">
      <textPath xlink:href="#thePath" startOffset="7%">
            Some text here
      </textPath>
    </text>
</svg>

Надеюсь, это то, что вам нужно

...