SVG徽标上的带圆圈文本(顶部和底部)

Question

我有一个从EPS转换为SVG的带圆圈的徽标，您可以在这里看到：SVG带圆圈的文本

我使用Boxy SVG将文本放在中间的圆圈内，但没有成功。我知道我应该把文本放在textPath上，但我不熟悉。我需要的是这样的：

顶部和底部带圆圈的徽标文本

不管文本长度是多少，它都必须在中间。感谢您的帮助。

Answer 1

看看这次根据您的规范渲染文本的尝试。您将不得不微调渲染文本的尺寸和位置，并调整演示属性，但这个版本应该让您开始。

采用的概念/技术：

• 在文本路径上渲染文本

• 指定椭圆的圆弧作为路径(在这种情况下为半圆(。

  • 圆弧的旋转
  • 绘制的圆弧的方向(通过扫掠标志(

• 在文本内容上定义锚点。

• 将给定偏移量的文本锚定到路径中
• 用户坐标系的几何变换：
  • 水平/垂直翻转

SVG:

<?xml version="1.0" encoding="utf-8"?>
<svg
viewBox="0 0 170.08 170.08" width="170.08" height="170.08" 
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g transform="matrix(1.333333, 0, 0, -1.333333, 0, 170.080002)" id="g10">
<g transform="scale(0.1)" id="g12">
<!--
The original content:
<path id="path14" .../>
...
<path id="path414" .../>
-->
<!--
The following 2 groups have been added
-->
<g
transform="translate(637.5,637.5) scale(1, -1) translate(-637.5,-637.5)"
>
<path
id="top-text"
d="M 637.5 637.5 m -340 0 a 340 340 0 0 1 680 0"
fill="none"
stroke="none"
/>
<text
font-family="Verdana"
font-size="90"
font-stretch="ultra-condensed"
fill="white"                
stroke="white"
stroke-width="2"
text-anchor="middle"
>
<textPath
xlink:href="#top-text"
baseline-shift="10%"
font-stretch="ultra-condensed"
startOffset="50%"
>GOLFCLUB APELDOORN</textPath>
</text>
</g>
<g
transform="translate(637.5,637.5) scale(-1, 1) translate(-637.5,-637.5)"
>
<path
id="bottom-text"
d="M 637.5 637.5 m 340 0 a 340 340 180 0 0 -680 0"
fill="none"
stroke="none"
/>
<text
font-family="Verdana"
font-size="90"
font-stretch="ultra-condensed"
fill="white"                
stroke="white"
stroke-width="2"
text-anchor="middle"
>
<textPath
xlink:href="#bottom-text"
baseline-shift="-90%"
font-stretch="ultra-condensed"
startOffset="50%"
>055 - 52 55 55</textPath>
</text>
</g>
</g>
</g>
</svg>

参考

所有必要的信息都可以在W3C SVG 1.1规范中找到。

特别感兴趣的是关于路径、文本和坐标系的部分