svg - 避免嵌入 SVG 中的文本剪切

Question

我有一个带有弯曲文本的 SVG，为了能够打开它 Illustartor 或 CorelDraw，我编写了一个 PHP 脚本，将文本转换为后者（AI 弯曲文本错误）。但是在这个转换之后，这段文字被剪掉了。

我试过了：

• 删除viewbox-> 文本对象缩放
• 改为->这样将文本的开头和结尾 text-anchor="start"剪掉text-anchor="middle"
• 玩preserveAspectRatio-> 没有得到想要的结果

另外我不认为增加视图框宽度会起作用，因为它仍然会带来一些转换并且可以缩放不需要它的文本。

我也觉得我目前的结果没有正确显示，应该更宽

原来的：

<?xml version="1.0" encoding="UTF-8"?>
    <svg><svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="204.21875" 
    height="47.0625" viewBox="0 0 204.21875 47.0625"><g 
    id="0.11324252430130399"><text fill="#FF0000" stroke="none" stroke- 
    width="0" stroke-linecap="round" stroke-linejoin="round" x="" y="" text- 
    anchor="start" font-size="24px" font-family="arial" style="paint- 
    order:stroke;" data-textcurve="49" data-itemzoom="1 1" data- 
    textspacing="0"><textPath xlink:href="#textPath-item-0"><tspan dy="0">some 
    random text</tspan></textPath></text></g><defs><path id="textPath-item-0" 
    d="M 8.671875 42.27672695769752 A 224.50591156146544 224.50591156146544 0 
    0 1 194.87404392183777 42.27672695769752"/></defs></svg></svg>

改造后

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="10in" height="19in" viewBox="0 0 291 389"><g xmlns:default="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><default:svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 204.21875 47.0625" x="41.794002" y="124.031094" width="199.315212" height="43.00006"><default:g id="0.11324252430130399"><default:text xmlns:default="http://www.w3.org/2000/svg" fill="#FF0000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="" y="" text-anchor="start" font-size="24px" font-family="arial" style="paint-order:stroke;" data-textcurve="49" data-itemzoom="1 1" data-textspacing="0" transform="matrix(1 0 0 1 10.508575634073 41.449625072391) rotate(-22.759904875656 0 0)">s</default:text><default:text xmlns:default="http://www.w3.org/2000/svg" fill="#FF0000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="" y="" text-anchor="start" font-size="24px" font-family="arial" style="paint-order:stroke;" data-textcurve="49" data-itemzoom="1 1" data-textspacing="0" transform="matrix(1 0 0 1 22.470359428287 36.535076221313) rotate(-19.364780943929 0 0)">o</default:text><default:text xmlns:default="http://www.w3.org/2000/svg" fill="#FF0000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="" y="" text-anchor="start" font-size="24px" font-family="arial" style="paint-order:stroke;" data-textcurve="49" data-itemzoom="1 1" data-textspacing="0" transform="matrix(1 0 0 1 36.342968127298 31.808497796986) rotate(-14.963694365763 0 0)">m</default:text><default:text xmlns:default="http://www.w3.org/2000/svg" fill="#FF0000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="" y="" text-anchor="start" font-size="24px" font-family="arial" style="paint-order:stroke;" data-textcurve="49" data-itemzoom="1 1" data-textspacing="0" transform="matrix(1 0 0 1 55.544337554077 26.873580391866) rotate(-10.562607787597 0 0)">e</default:text><default:text xmlns:default="http://www.w3.org/2000/svg" fill="#FF0000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="" y="" text-anchor="start" font-size="24px" font-family="arial" style="paint-order:stroke;" data-textcurve="49" data-itemzoom="1 1" data-textspacing="0" transform="matrix(1 0 0 1 68.514289571198 24.539662965228) rotate(-7.6704651790886 0 0)"> </default:text><default:text xmlns:default="http://www.w3.org/2000/svg" fill="#FF0000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="" y="" text-anchor="start" font-size="24px" font-family="arial" style="paint-order:stroke;" data-textcurve="49" data-itemzoom="1 1" data-textspacing="0" transform="matrix(1 0 0 1 77.308993497502 23.399375413111) rotate(-5.4070492246034 0 0)">r</default:text><default:text xmlns:default="http://www.w3.org/2000/svg" fill="#FF0000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="" y="" text-anchor="start" font-size="24px" font-family="arial" style="paint-order:stroke;" data-textcurve="49" data-itemzoom="1 1" data-textspacing="0" transform="matrix(1 0 0 1 86.756329148838 22.565275109953) rotate(-2.5149066160946 0 0)">a</default:text><default:text xmlns:default="http://www.w3.org/2000/svg" fill="#FF0000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="" y="" text-anchor="start" font-size="24px" font-family="arial" style="paint-order:stroke;" data-textcurve="49" data-itemzoom="1 1" data-textspacing="0" transform="matrix(1 0 0 1 100.5411746455 22.065879210017) rotate(1.0059626464378 0 0)">n</default:text><default:text xmlns:default="http://www.w3.org/2000/svg" fill="#FF0000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="" y="" text-anchor="start" font-size="24px" font-family="arial" style="paint-order:stroke;" data-textcurve="49" data-itemzoom="1 1" data-textspacing="0" transform="matrix(1 0 0 1 114.33067013955 22.413982141576) rotate(4.5268319089703 0 0)">d</default:text><default:text xmlns:default="http://www.w3.org/2000/svg" fill="#FF0000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="" y="" text-anchor="start" font-size="24px" font-family="arial" style="paint-order:stroke;" data-textcurve="49" data-itemzoom="1 1" data-textspacing="0" transform="matrix(1 0 0 1 128.07276017669 23.608269813315) rotate(8.0477011715028 0 0)">o</default:text><default:text xmlns:default="http://www.w3.org/2000/svg" fill="#FF0000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="" y="" text-anchor="start" font-size="24px" font-family="arial" style="paint-order:stroke;" data-textcurve="49" data-itemzoom="1 1" data-textspacing="0" transform="matrix(1 0 0 1 142.56376901114 25.799269283198) rotate(12.448787749668 0 0)">m</default:text><default:text xmlns:default="http://www.w3.org/2000/svg" fill="#FF0000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="" y="" text-anchor="start" font-size="24px" font-family="arial" style="paint-order:stroke;" data-textcurve="49" data-itemzoom="1 1" data-textspacing="0" transform="matrix(1 0 0 1 161.28748096036 30.094565435109) rotate(16.22114767381 0 0)"> </default:text><default:text xmlns:default="http://www.w3.org/2000/svg" fill="#FF0000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="" y="" text-anchor="start" font-size="24px" font-family="arial" style="paint-order:stroke;" data-textcurve="49" data-itemzoom="1 1" data-textspacing="0" transform="matrix(1 0 0 1 169.7904205993 32.613908672806) rotate(18.484563628295 0 0)">t</default:text><default:text xmlns:default="http://www.w3.org/2000/svg" fill="#FF0000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="" y="" text-anchor="start" font-size="24px" font-family="arial" style="paint-order:stroke;" data-textcurve="49" data-itemzoom="1 1" data-textspacing="0" transform="matrix(1 0 0 1 178.76606186368 35.677523876761) rotate(21.376706236804 0 0)">e</default:text><default:text xmlns:default="http://www.w3.org/2000/svg" fill="#FF0000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="" y="" text-anchor="start" font-size="24px" font-family="arial" style="paint-order:stroke;" data-textcurve="49" data-itemzoom="1 1" data-textspacing="0" transform="matrix(1 0 0 1 191.57198798021 40.803888858848) rotate(24.897575499337 0 0)">x</default:text><default:text xmlns:default="http://www.w3.org/2000/svg" fill="#FF0000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="" y="" text-anchor="start" font-size="24px" font-family="arial" style="paint-order:stroke;" data-textcurve="49" data-itemzoom="1 1" data-textspacing="0" transform="matrix(1 0 0 1 203.49025065141 46.427218902602) rotate(27.789718107846 0 0)">t</default:text></default:g><default:defs><default:path id="textPath-item-0" d="M 8.671875 42.27672695769752 A 224.50591156146544 224.50591156146544 0 0 1 194.87404392183777 42.27672695769752"></default:path></default:defs></default:svg></g></svg>

在这里你可以看到我确实保留了原始视口和宽度/高度

绘制这个对象的正确方法是什么，这样它就不会被切割，也不会被缩放？

标签： svg

Answer 1

这里的问题不是关于svg，而是关于 PHP 脚本中的转换。您可以在这个 codepen中看到原因。我把你原来的 svg 代码用红色加上一些转换的字母用蓝色。如您所见，字母不在同一个坐标中，这就是结果被视口裁剪的原因。此外，关于转换后的 svg 代码的几点：

• 几个<text>标签显示为<default:text>。这看起来像是 PHP 脚本的问题。
• 元素的id是。也许这个数字应该在别的地方？<g>"0.11324252430130399"
• 就像在原始代码中一样，<svg>另一个内部有一个<svg>. 这可能会导致某处出现问题。考虑删除外部 svg。

总之，您应该修改 PHP 转换，svg 代码的行为正确。