Question

我有一个带圆圈的徽标，已从EPS转换为SVG，您可以在此处查看：SVG circled text

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

Logo circled text top and bottom

无论文本长度如何，它都必须位于中间。任何帮助表示赞赏。

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 specs中找到。

特别感兴趣的是paths，text和coordinate systems

中的部分

SVG徽标上的带圆圈的文本（顶部和底部）

1 个答案: