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 代碼片段將曲線內的文本更改為我們想要的樣子。

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