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

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

Before After

1
xXSteroidsXx 16 Апр 2020 в 09:40

2 ответа

Лучший ответ

Вы можете использовать <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>
2
Sphinxxx 16 Апр 2020 в 07:51

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

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>

Надеюсь это то что тебе нужно

0
enxaneta 16 Апр 2020 в 07:43