一些SVG和文本動畫的Defs

我有一個模板，其中所有部分頭都在SVG中給出並定義等，但沒有實際文本。這defs和SVG標籤使文字動畫。我想更改文字。我應該怎麼做。一些SVG和文本動畫的Defs

我的代碼在這裏..此代碼動畫字「工作」，但沒有寫在代碼中的工作。這使我困惑..

<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>

請幫我更改文本...

來源

2015-07-20 M.BABER Zaman

您的文字已被轉換爲路徑。請注意組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編輯器中。然後根據需要替換文本，最後再次轉換爲路徑。

來源

2015-07-20 18:00:31

但我沒有svg文件。一切只在這些代碼中。沒有SVG文件。我無法理解如何在編輯器中加載svg文件。你能告訴我哪個編輯器我應該使用 –

或者有無論如何改變路徑到文本.. –

保存文件的一部分從''加載到幾乎所有的矢量編輯器。 Inkscape是免費的。 –

一些SVG和文本動畫的Defs

回答

相關問題