Question

我有一个模板，其中所有部分头都以SVG和defs等给出。但没有实际文本。 defs和SVG标签使文本动画化。我想改变文字。我该怎么办

我的代码在这里..此代码动画字＃34;工作＆＃34;但是没有用代码编写的WORK。这让我很困惑..

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="223.9" height="45.4" viewBox="0 0 223.9 45.4" enable-background="new 0 0 223.9 45.4" xml:space="preserve">
                <defs>
                    <clipPath id="work-clip">
                        <path d="M22.3 39.5h-4.5L6.6 5.9h6.5l7 21 7.4-21h4.6l7.4 21 7-21H53L41.8 39.5h-4.6l-7.5-21.3-7.4 21.3zM77.9 35c-3.3-3.3-4.9-7.4-4.9-12.3C73 13 80.3 5.4 90.5 5.4S108 13 108 22.7 100.7 40 90.5 40c-5.2 0-9.4-1.7-12.6-5zm4.7-20.5c-2.1 2.2-3.2 4.9-3.2 8.2 0 6.4 4.8 11.5 11 11.5s11-5.1 11-11.5-4.8-11.5-11-11.5c-3.1 0-5.7 1.1-7.8 3.3zM139 24.6v14.9h-6.5V5.9h12.2c3.1 0 5.5.8 7.3 2.5 2 1.9 3 4.2 3 6.9s-1 5-3 6.9c-1 .9-2.1 1.5-3.4 2l12.6 15.4h-8l-12-14.9H139zm0-13v7.2h5.4c3.1 0 4.2-1.6 4.2-3.5 0-2.1-1.1-3.7-4.2-3.7H139zM190.4 23v16.5H184V5.9h6.5v13.5l12.7-13.5h8.6L197 21.3l16.5 18.2h-8.3L190.4 23z"/>
                    </clipPath>
                </defs>
                <g class="letters" clip-path="url(#work-clip)" stroke="#1D1D1F" fill="none" stroke="#010101" stroke-miterlimit="10">
                    <g class="letter-w">
                        <polyline class="outline-1" points="53,5.9 41.8,39.5 37.3,39.5 29.8,18.2 22.3,39.5 17.8,39.5 6.6,5.9"/>
                        <polyline class="fill-2" points="25.7,20.5 29.8,8.8 39.5,36.6 50.2,4.4"/>
                        <polyline class="fill-1" points="9.4,4.4 20.1,36.6 25.7,20.5"/>
                        <polyline class="outline-2" points="13.2,5.9 20.1,26.8 27.5,5.9 32.1,5.9 39.5,26.8 46.4,5.9"/>
                    </g>
                    <g class="letter-o">
                        <path class="outline-1" d="M108,22.7c0,9.7-7.3,17.3-17.5,17.3c-5.1,0-9.3-1.7-12.6-5s-4.9-7.4-4.9-12.3c0-9.7,7.3-17.3,17.5-17.3S108,13,108,22.7"/>
                        <path class="outline-2" d="M79.4,22.7c0,6.4,4.8,11.5,11,11.5s11-5.1,11-11.5s-4.8-11.5-11-11.5c-3.1,0-5.8,1.1-7.9,3.4S79.4,19.5,79.4,22.7"/>
                        <path class="fill" d="M99.6,11.2c-2.4-2.1-5.6-3.4-9.2-3.4c-4.1,0-7.5,1.5-10.2,4.3c-2.7,2.9-4.1,6.4-4.1,10.5c0,8.3,6.2,14.9,14.3,14.9s14.3-6.6,14.3-14.9C104.7,18,102.8,13.9,99.6,11.2"/>
                    </g>
                    <g class="letter-r">
                        <path class="outline-1" d="M132.6,5.9h12.2c3.1,0,5.5,0.8,7.3,2.5c2,1.9,3,4.2,3,6.9"/>
                        <line class="outline-2" x1="132.6" y1="39.5" x2="132.6" y2="5.9"/>
                        <path class="outline-3" d="M155.1,15.2c0,2.7-1,5-3,6.9c-1,0.9-2.1,1.5-3.4,2l12.6,15.4"/>
                        <path class="outline-4" d="M139,15.2v3.6h5.4c3.1,0,4.2-1.6,4.2-3.5"/>
                        <path class="outline-5" d="M148.7,15.3c0-2.1-1.1-3.7-4.2-3.7H139v3.6"/>
                        <line class="fill-1" x1="135.8" y1="40" x2="135.8" y2="6.3"/>
                        <path class="fill-2" d="M135.2,21.7h9.3c5.4,0,7.3-2.8,7.3-6.3c0-3.7-2-6.6-7.3-6.6h-9.3"/>
                        <line class="fill-3" x1="159.7" y1="42.4" x2="143" y2="21.7"/>
                    </g>
                    <g class="letter-k">
                        <line class="outline-1" x1="184" y1="39.5" x2="184" y2="5.9"/>
                        <polyline class="outline-2" points="196.9,21.2 213.5,39.5 205.2,39.5"/>
                        <polyline class="outline-3" points="190.4,19.3 203.2,5.9 211.7,5.9"/>
                        <line class="fill-1" x1="187.3" y1="39.5" x2="187.3" y2="5.9"/>
                        <line class="fill-2" x1="210.6" y1="3" x2="190.9" y2="23.5"/>
                        <line class="fill-3" x1="210.6" y1="41.4" x2="190.7" y2="19"/>
                    </g>
                </g>
            </svg>

请帮我改变文字......

Answer 1

您的文字已转换为路径。请注意四个小组letter-w，letter-o，letter-r，letter-k。要更改文本，您必须删除这些组并替换为<text>元素。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="223.9" height="45.4" viewBox="0 0 223.9 45.4" enable-background="new 0 0 223.9 45.4" xml:space="preserve">
                <defs>
                    <clipPath id="work-clip">
                        <path d="M22.3 39.5h-4.5L6.6 5.9h6.5l7 21 7.4-21h4.6l7.4 21 7-21H53L41.8 39.5h-4.6l-7.5-21.3-7.4 21.3zM77.9 35c-3.3-3.3-4.9-7.4-4.9-12.3C73 13 80.3 5.4 90.5 5.4S108 13 108 22.7 100.7 40 90.5 40c-5.2 0-9.4-1.7-12.6-5zm4.7-20.5c-2.1 2.2-3.2 4.9-3.2 8.2 0 6.4 4.8 11.5 11 11.5s11-5.1 11-11.5-4.8-11.5-11-11.5c-3.1 0-5.7 1.1-7.8 3.3zM139 24.6v14.9h-6.5V5.9h12.2c3.1 0 5.5.8 7.3 2.5 2 1.9 3 4.2 3 6.9s-1 5-3 6.9c-1 .9-2.1 1.5-3.4 2l12.6 15.4h-8l-12-14.9H139zm0-13v7.2h5.4c3.1 0 4.2-1.6 4.2-3.5 0-2.1-1.1-3.7-4.2-3.7H139zM190.4 23v16.5H184V5.9h6.5v13.5l12.7-13.5h8.6L197 21.3l16.5 18.2h-8.3L190.4 23z"/>
                    </clipPath>
                </defs>
                <g class="letters" stroke="#1D1D1F" fill="none" stroke="#010101" stroke-miterlimit="10">
                    <text x="6" y="40" font-size="50">W O R K</text>
                </g>
</svg>

但是现在您遇到的问题是，渲染SVG的机器是否具有您需要的正确字体。这就是为什么它最初将被转换为路径。

另外，我不知道你的动画是否仍然有用，因为你还没有把它包括在内。

如果您的动画不起作用，您可能必须将SVG文件加载到具有正确字体的计算机上的SVG编辑器中。然后根据需要替换文本，最后再次转换为路径。

一些SVG和Defs for Text Animations

1 个答案: