以下是ian marquette的來賓帖子。
ian了解到svg可以包含元素，這意味著文字可以來自動態**，同時仍然可以對其進行定製的svg定製內容。
我最近在乙個基於wordpress的**上工作，該**需要乙個資訊圖。 作為響應式設計的支持者，我在illustrator中繪製了資訊圖，然後將其匯出到svg以實現可伸縮性。 在後台修改時，我發現您可以將wordpress自定義字段新增到svg文字元素中，從而可以從wordpress cms中控制基於文字的內容。 那有多棒？
在這裡，我將解釋我是如何做到的，以及一些其他可能有用的選項。
在您選擇的向量編輯軟體中建立圖形。 將佔位符文字新增到要包含使用者控制的文字的區域。 在這裡，我建立了乙個簡單的圖形用於演示。
請注意，路徑是演示一些獨特的svg。
可能是過濾器，中風或svg可以做的其他任何酷事。
現在，使用首選編輯器開啟svg檔案。 您必須對**進行一些更改。 在我的示例中，必須將路徑更改為，並指定id並使用xlink進行鏈結。 如果我不這樣做，則文字中的每個字元都會有自己的標籤，座標等。
在codepen上檢視chris coyier （ @chriscoyier ）的pen joakc 。
您可以直接將標記複製並貼上到wordpress模板中。 您還可以在頁面上使用svg的其他方法之一，例如將檔案鏈結為物件。 本質上，它必須是嵌入式svg，而不是用作svg的 或背景。
您將要用以下**替換標記之間的內容，並用想要給您的任何名稱替換custom_field：
<?php
global $wp_query;
$postid = $wp_query->post->id;
echo get_post_meta($postid, 'custom_field', true);
wp_reset_query();
?>
現在，如果您檢視該頁面，則應該在自定義svg圖形內看到自定義文字！ 當然，自定義字段只是做到這一點的一種方法，而且相當可擴充套件。 您可以使用這種方式執行帖子標題，選單或其他可從任何cms動態吐出文字的內容。
一旦進入，就可以像常規標記一樣設定樣式。 例如：
...
...
.text-path翻譯自:
svg 筆畫和填充
stroke 邊框 stroke red 設定顏色 stroke width 設定寬 stroke linecap 設定線兩頭樣式 butt 預設 round 圓頭 square 預設方形，超出長度 stroke dasharray 設定虛線樣式 線長，空長，線長.stroke linejoin 設...
SVG平移和旋轉
在svg中可以對所畫的形狀進行平移 translate 運動，下面是乙個平移的例子 在上面的例子中通過把矩形元素的transform屬性值設定為translate 75,25 使得原來的正方形 紅色 向右平移75畫素，向下平移25畫素，得到乙個新的正方形 藍色 在svg中也可以對所畫的形狀進行旋轉 ...
wordpress 新增自定義頁面
url wordpress是乙個優秀的平台，可以寫blog，現在有往cms方向發展的趨勢 wordpress使用者在使用的過程中，有時候會希望要新增新的頁面，而且是非常靈活的，比如完全自定義，同時需要的地方可以顯示模板的各個部分，比如選單 tag等 這時候，可以使用wordpress的頁面模板的功能...