изменение текста кривой SVG - PullRequest
Новая
       55

изменение текста кривой SVG

0 голосов
/ 23 января 2020

У меня есть файл SVG, который показывает мне текст в виде кривой. Я хочу изменить его в PHP.
Я использую, чтобы получить и изменить библиотеку SVG 

use SVG\SVG;
$svg = SVG::fromFile('testing.svg');
$image = SVG::fromString($svg);
$doc = $image->getDocument();

Вывод SVG

Output

Это показывает мне изогнутый текст

Когда я смотрю на файл SVG, он показывает мне этот код. 

<rect x="216" y="392.856" style="fill:none;" width="40" height="220"/>
<g>
<g>
    <path d="M219.283,204.885c2.175,2.252,3.263,3.378,5.438,5.63c4.924-4.76,7.447-7.044,12.595-11.421
        c-2.025-2.388-3.039-3.582-5.064-5.969c1.431-1.216,2.15-1.817,3.597-3.005c4.742,5.79,7.113,8.684,11.854,14.474
        c-1.347,1.106-2.017,1.666-3.349,2.799c-2.27-2.676-3.404-4.012-5.674-6.688c-5.107,4.342-7.609,6.607-12.495,11.329
        c2.438,2.523,3.656,3.785,6.093,6.309c-1.26,1.218-1.886,1.833-3.129,3.076c-5.291-5.291-7.937-7.937-13.229-13.228
        C217.257,206.854,217.93,206.193,219.283,204.885z"/>
    <path d="M251.546,193.57c2.073,2.574,5.886,1.379,9.419-1.125c2.529-1.793,3.9-3.086,5.031-4.313
        c0.634,0.417,0.952,0.625,1.583,1.045c-1.043,1.163-2.937,2.965-6.002,5.148c-5.93,4.225-11.025,4.852-13.523,1.66
        c-2.498-3.191-0.975-8.523,4.942-12.758c6.63-4.745,10.599-2.599,11.956-0.534c0.274,0.417,0.403,0.798,0.499,1.034
        C259.79,187.46,257.006,189.428,251.546,193.57z M261.067,184.561c-0.833-1.313-3.225-2.661-7.349,0.299
        c-3.707,2.661-3.926,5.719-3.188,7.284C254.687,188.993,256.795,187.477,261.067,184.561z"/>

В каждом теге пути есть одна буква моего кривая текста. Я хочу динамически изменить одну букву с помощью jQuery или PHP.

Как мне изменить одну букву с помощью jQuery или PHP?

1 Ответ

0 голосов
/ 11 февраля 2020

То, чего вы хотите достичь, довольно сложно достичь сразу.

Используемые вами данные SVG представляют собой текст. Все точки, необходимые для отрисовки буквы, находятся там же, как и вычисленная кривизна, которая нужна букве в какой точке кривой. Как вы можете видеть на Н, обе ноги не параллельны друг другу. В путях их рисования также жестко прописано, где их рисовать. Перемещение их - это кошмар.

Поскольку вы рисуете sh для рисования текста вдоль кривой, я предлагаю другое решение, которое значительно упрощает манипулирование отображаемыми текстовыми данными.

Мы все еще будем использовать SVG, но мы не будем использовать жестко закодированные «пути точек» для визуализации текста. Для получения дополнительной информации читайте https://css-tricks.com/snippets/svg/curved-text-along-path/

body {
  background-color: #333;
  font-family: 'Luckiest Guy', cursive;
  font-size: 35px;
  
}

path {
  fill: transparent;
}

text {
  fill: #FF9800;
  text-align: center;
}



Resources
<svg viewBox="0 0 500 500">
    <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
    <text width="500" >
      <textPath xlink:href="#curve">
        Hello How are you
      </textPath>
    </text>
  </svg>

Если вы реализуете это и подставляете свой собственный текст, вы заметите, что он вне центра.

Для этого мы можем возиться с атрибут startOffset . 

body {
  background-color: #333;
  font-family: 'Luckiest Guy', cursive;
  font-size: 35px;
  
}

path {
  fill: transparent;
}

text {
  fill: #FF9800;
  text-align: center;
}



Resources
<svg viewBox="0 0 500 500">
    <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
    <text width="500" >
      <textPath class="curved-text" xlink:href="#curve" startOffset="60">
        Hello How are you
      </textPath>
    </text>
  </svg>

И затем, добавив класс в наш текстовый контейнер, мы можем использовать простой фрагмент jQuery, чтобы изменить текст в пределах кривой на то, что нам нужно быть. 

$('button').on('click', (e) => {
   $('.curved-text').text("I'm fine thank you");
});
body {
  background-color: #333;
  font-family: 'Luckiest Guy', cursive;
  font-size: 35px;
  
}

path {
  fill: transparent;
}

text {
  fill: #FF9800;
  text-align: center;
}



Resources
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>click me</button>
<svg viewBox="0 0 500 500">
    <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
    <text width="500" >
      <textPath class="curved-text" xlink:href="#curve" startOffset="60">
        Hello How are you
      </textPath>
    </text>
  </svg>
...