Question

我有adobe illustrator。当我将图形导出到svg时，文本部分看起来像：

  <style type="text/css">
 .st6{fill:#FFFFFF;}
  </style>
 <text id="text2" transform="matrix(1 0 0 1 153.873 305.2743)" class="st6">Default text</text>

此文字与中心对齐。现在我用浏览器在浏览器中更改文本 - 所以，将“默认文本”替换为“新文本”。此文本不再与中心对齐。如果我更改文本，我怎样才能实现它始终与中心对齐？我尝试将“text-align：center”添加到st6类或将此属性添加到文本元素：

  text-anchor="middle"

但不起作用。有什么想法吗？

另一个有趣的其他例子，我不明白。这是我拥有的svg模板的一部分：

 <g id="text_4">
<g>
    <defs>
        <rect id="SVGID_10_" x="9.96" y="273.53" width="170" height="15"/>
    </defs>
    <clipPath id="SVGID_11_">
        <use xlink:href="#SVGID_10_"  style="overflow:visible;"/>
    </clipPath>
    <g style="clip-path:url(#SVGID_11_);">
        <text data-label="Text 4" text-anchor="middle" x="95" y="282.7" style="fill:#748B9E; font-family:'Merriweather'; font-size:8px;">2013 Riesling </text>
    </g>
</g>

我可以更改文字而不是“2013 Riesling”我可以添加“xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”，文字仍在中心。

然后我从这个svg中删除了除文本之外的所有元素（所以删除所有g元素和剪辑路径）只剩下这个了：

<text data-label="Text 4" text-anchor="middle" x="95" y="282.7" style="fill:#748B9E; font-family:'Merriweather'; font-size:8px;">2013 Riesling</text>

但是模板仍然是相同的，如果我在浏览器中查看它，没有任何改变。怎么可能？所以，我可以将SVG的大小缩短70％。在这里，文本总是在我的模板中居中，如果我这样做则不是。有趣。

Answer 1

Adobe Illustrator已根据您的设计定位文本，使其居中。但很明显，定位是针对特定文本的。

text-align: center 不将与SVG一起使用。这是一个HTML属性。

text-anchor: middle是要使用的正确属性。它将使文本以您指定的坐标为中心。因此，为了使新文本正确居中，您必须调整文本元素的x坐标。

在您的情况下，使用transform属性定位文本。您可以调整转换，也可以将其替换为x和y属性。

因此，例如，如果您的文本的中心位置计算为（200,305.2743），则需要将文本元素更改为：

<style type="text/css">
  .st6 {fill:#FFFFFF; text-anchor:middle;}
</style>
<text id="text2" transform="matrix(1 0 0 1 200 305.2743)" class="st6">New text</text>

或

<style type="text/css">
  .st6 {fill:#FFFFFF; text-anchor:middle;}
</style>
<text id="text2" x="200" y="305.2743" class="st6">New text</text>

如何确定运行时（在浏览器中）的中心位置取决于您。

一种选择是在文本元素上使用getComputedTextLength()或getBBox()。然后将一半宽度加到x坐标上。

或者您也可以更改Illustrator文件，以使占位符文本像"."一样小。那么你可能已经足够接近中心，你不需要调整坐标。

Answer 2

详细说明包含变通方法的评论

正如已接受的答案所指出的，Illustrator（2017.1.0版）并没有在其SVG中导出text-anchor = middle标签。如果您想将SVG与动态生成和居中的文本一起使用，那将是一种遗憾。

我找到了以下解决方法。

步骤1：在AI中创建您的设计，文本居中，文本框架位于正确的位置

第2步：当您完成绘图并将其导出到SVG之前：右对齐文字：

第3步：手动（或动态）将text-anchor = middle属性添加到文本框架。

{{1}}

第4步：赞赏结果

对齐SVG内的文本

2 个答案: