在SVG中对齐文本

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>

此文本居中对齐。现在，我使用javascript更改了浏览器中的文本-因此，将“默认文本”替换为“新文本”。该文本不再对齐以居中。如果更改文本，如何实现文本始终居中对齐？我尝试将“ text-align：center”添加到st6类或将此属性添加到text元素：

  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中删除了所有元素，除了text（所以删除了所有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会不会有SVGs工作。那是HTML属性。

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

您的情况是使用transform属性来定位文本。您可以调整转换，也可以将其替换为xand 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文件，以使占位符文本有点像"."。这样一来，您可能会足够靠近中心，无需调整坐标。