Question

我需要设置SVG参数text-anchor：＆＃34; middle＆＃34;对于吉他和弦图生成器以小圆圈为中心的一组单字符tspan元素：请参阅http://chordography.blogspot.co.uk/。

当我将svg代码粘贴到浏览器中时：Chrome，IE，Firefox，Opera，Safari或Open Office Writer，字符位于中心左侧，除了最后一个正确居中的tspan元素。最后一个总是没问题，即使我重新安排了tspans。在大多数情况下，这个问题可能并不明显，但在这个应用程序中像拇指一样突出。

这里，情节变厚了。当我使用JavaScript将svg代码直接插入DOM时，正如在Chordography中一样，所有tspan元素都正确居中。还有一个转折点;当我将代码粘贴到Blogger中时，它也会正确居中，如http://chordography.blogspot.co.uk/p/blog-page_58.html所示。

以下是从XMLSerializer派生的相关部分的代码，显示了圆圈和插入标签的位置＆＃39;。只有最终的＆＃39; 1＆＃39;适当地居中，以及最后的＆＃39; A＆＃39;在页脚中。

<g class="dots">
   <circle cx="62.1" cy="73.6" r="9.6"/>
   <circle cx="85.1" cy="128.8" r="9.6"/>
   <circle cx="108.1" cy="128.8" r="9.6"/>
   <circle cx="131.1" cy="128.8" r="9.6"/>
   <circle cx="154.1" cy="73.6" r="9.6"/>
</g>
<g text-anchor="middle" class="text">
   <text class="labels">
      <tspan x="62.1" y="79.2">1</tspan>
      <tspan x="85.1" y="134.4">2</tspan>
      <tspan x="108.1" y="134.4">3</tspan>
      <tspan x="131.1" y="134.4">4</tspan>
      <tspan x="154.1" y="79.2">1</tspan>
   </text>
   <text class="footer">
      <tspan x="39.1" y="189.6"> </tspan>
      <tspan x="62.1" y="189.6">D</tspan>
      <tspan x="85.1" y="189.6">A</tspan>
      <tspan x="108.1" y="189.6">D</tspan>
      <tspan x="131.1" y="189.6">F♯</tspan>
      <tspan x="154.1" y="189.6">A</tspan>
   </text>
</g>

有点奇怪;任何想法的人。

Answer 1

如果你为每个tspan添加'text-anchor =“middle”'，你将把它们居中（你必须删除'tspans'之间的空间，否则额外的空间将是被视为第一行的一部分，它们不会完全居中。）

这个空间很可能就是你遇到这个问题的原因。

tspans看起来像这样......

<tspan text-anchor="middle" x="56.5" y="72">1</tspan><tspan
text-anchor="middle" x="77.5" y="122">2</tspan><tspan
text-anchor="middle" x="98.5" y="122">3</tspan><tspan
text-anchor="middle" x="119.5" y="122">4</tspan><tspan
text-anchor="middle" x="140.5" y="72">1</tspan>

参考jsFiddle：http://jsfiddle.net/rfornal/0u5wmevm/

Answer 2

通常我会记录所有不需要的字符，然后将字符串作为数组读取，例如：

var badStr = 'xx,1p23,4 "5'; // string with errors
var newStr = str.replace(/[^x\d]/g,''); // outputs: x12345
console.log(newstr[1]); // debug, outputs: 1

svg以文本为中心的异常

2 个答案: