svg 曲线 文字 变化

Question

我有一个 SVG 文件，它以曲线显示文本。我想在 PHP 中更改它。
我用来获取和更改 svg 库

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

SVG 的输出是

这是给我看弯曲的文字

当我查看 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 更改一个字母？

Answer 1

你想要实现的目标很难马上实现。

您使用的 SVG 数据是渲染文本。渲染一个字母所需的所有点都在其中，以及该字母在曲线的哪个点所需的计算曲率。正如你在 H 上看到的那样，两条腿并不平行。 在绘制它们的路径中，在哪里绘制它们也是硬编码的。移动它们是一场噩梦。

由于您希望沿曲线绘制文本，因此我提出了一种不同的解决方案，这使得操作您正在显示的文本数据变得更加容易。

我们仍将使用 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 sn-p 将曲线中的文本更改为我们想要的样子。

$('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>